8.选择器的类型以及权重的计算

1.元素选择符:统配选择符,类型选择符,id选择符,类选择符

2.关系选择符: 

选择符 名称 版本 描述
E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素。
E>F 子选择符(Child combinator) CSS2 选择所有作为E元素的子元素F。
E+F 相邻选择符(Adjacent sibling combinator) CSS2 选择紧贴在E元素之后F元素。
E~F 兄弟选择符(General sibling combinator) CSS3 选择E元素所有兄弟元素F。

3.属性选择符

4.伪类选择符

5伪元素选择符

http://css.doyoe.com/


4个等级的定义如下:

  1. 第一等:代表内联样式,如: style=””,权值为1000。
  2. 第二等:代表ID选择器,如:#content,权值为100。
  3. 第三等:代表类,伪类和属性选择器,如.content,权值为10。
  4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113

下面是一些计算示例:



注意:通用选择器(*),子选择器(>)和相邻同胞选择器(+)并不在这四个等级中,所以他们的权值都为0。

* { width:1000px; } // 通用选择器.img { width: 180px;} // 类选择器img[alt="img"] { width: 400px;} //属性选择器img:hover { width: 500px;} // 伪类选择器#img { width: 300px;} //ID 选择器


!important

!important允许开发人员强制应用某样式,他的用法是写在该样式的某属性值后,结束分号前,以便强制应用该样式,如:

 <style>
        img { width: 150px !important;}
    style>

你可能感兴趣的:(8.选择器的类型以及权重的计算)