CSS选择器优先级总结

CSS选择器总结

CSS中的选择器规则⾮常重要，种类也⽐较多，⽽jquery中的元素选择器与之也⾮常类似，所以很有必要进⾏学习总结⼀番。

1.元素选择器：

例：选择所有p元素

p {background-color:gray}

以上p可以是任意的html元素名字，如body,h1,h2,div,span等。

2.选择器分组

例：选择所有p元素和h2元素

p,h2 {background-color:red}

3.类选择器

例：选择所有class='demo'的元素

.demo {background-color:gray}

4.类结合元素选择器

例：选择所有class='demo'的h1元素

h1.demo {background-color:red}

5.多类选择器

例：选择同时class标记为demo1,demo2的元素

.demo1.demo2{background-color:red}

6.ID选择器

例：选择ID=demo的元素

#demo {background-color:red}

这⾥需要注意的是：（1）ID在整个html⽂档中是唯⼀的，⽽class不唯⼀（2）类选择器和 ID 选择器可能是区分⼤⼩写的。这取决于⽂档

的语⾔。HTML 和 XHTML 将类和 ID 值定义为区分⼤⼩写，所以类和 ID 值的⼤⼩写必须与⽂档中的相应值匹配。

7.属性选择器

（a)简单属性选择器

例：选择含有demo的属性的所有元素

*[demo] {color:red}

例：只选择有 href 属性的锚（a 元素）

a[href] {color:red}

例：选择同时有 href 和 title 属性的 HTML 超链接

a[href][title] {color:red}

(b)根据具体属性值选择

例：选出title是'demo1'，href是'#'的超链接

a[title='demo'][href='#'] {color:red}

需要注意的是title必须是'demo',不能多也不能少。

常见CSS选择器的权重和优先级

⼀、常见CSS选择器

【元素选择器】1、通配选择器：*（匹配所有元素）

a、效率不⾼，页⾯上的标签越多，效率越低，所以页⾯上最好不要出现这个选择器

2、标签选择器：li（匹配标签为li的元素）

a、所有标签都能够当做选择器，⽐如body、h1、dl、ul、span等等

b、不管这个标签藏的多深，都能够被选择上

c、选择的是所有的，⽽不是某⼀个。所以是共性，⽽不是特性

3、ID选择器：#content（匹配ID属性值等于content的元素）

4、类选择器：.list（匹配class属性包含list的元素）

a、class可以重复，也就是说，同⼀个页⾯上可能有多个标签同时属于某⼀个类

b、同⼀个标签可以同时携带多个类，多个类⽤空格隔开，多个样式有冲突的，以css中后出现的为准

c、不要去试图⽤⼀个类名，把某个标签的所有样式写完。这个标签要多携带⼏个类，共同造成这个标签的样式

d、每⼀个类要尽可能⼩，有“公共”的概念，能够让更多的标签使⽤

【关系选择器】1、后代选择器：#content h3（匹配ID为content的元素内所有的h3元素）

a、空格就表⽰后代，强调⼀下：选择的是后代，不⼀定是⼉⼦

b、当要把某⼀个部分的所有的什么，进⾏样式改变，就要想到后代选择器

2、⼦元素选择器：#content>h3（匹配ID为content的元素⼦级的h3元素）

3、交集选择器：h3.content（匹配class为content的h3元素）

a、交集选择器没有空格

b、交集选择器可以连续交（⼀般不要这么写）

c、交集选择器，我们⼀般都是以标签名开头，⽐如div.haha ⽐如p.special

4、并集选择器（分组选择器）：h1，h2（匹配所有的h1和h2元素）

5、相邻选择器：h1+h2（匹配 h1 元素之后紧跟的 h2 元素）

6、兄弟选择器：h1~h2（匹配 h1 元素之后所有的 h2 元素）

一、CSS的优先级

1、标有"!important"的规则有最高优先级

一个样式规则可以有一个"important"附带标签，表示该样式规则具有最高优先级。例如下面例子中，前景色被标为important。

H1{color:black !importan; font-family:sans-serif}

注意：这种声明容易引起混乱，因此通常使用得较少。

2、创作者规则优先级高于浏览者规则

浏览器允许浏览者创建样式规则以覆盖系统缺省值。在此情况下，由网页创作者明确设定得样式优先级较高，而浏览者设置得样式规则优先级较低。

3、更特殊得规则优先于不够特殊的规则

在决定特殊性时，selector中的ID属性有最高优先级。基于ID selector的优先级可通过计数Selector中类属性的数量确定，数量越多优先级越高。假如规则仍然无法确定优先级，则HTML元素名的数量决定了特殊性。

4、在同一个级别的情况下，最后指定的规则有优先权

假如两个或更多的规定在应用了前三个规定具有相同优先级，则后给出的规则优先于早先给出的规则。

如果在网页的HEAD标记中同时使用了STYLE标记符（指定嵌入式样式）和LINK标记符（指定链接式样式），并且这两个样式指定中同时应用了具有同一优先级别的样式，则STYLE标记符和LINK标记符的先后顺序将决定样式的优先级。

例如，如果在LINK所链接的样式表（mycss.css）中定义了以下一条样式规则：

H1{color:red}

同时在嵌入式样式定义中也定义了一条规则：

H1{color:yellow}

在网页中的样式定义如下所示：

由于STYLE标记符中定义的样式后出现，因此它具有更高的优先级，所以网页中H1标记符的内容将显示为黄色（yellow)。同样，如果将Link标记符的位置移动到标记符之后，则网页中H1标记符的内容将显示为红色（red)。

另外，由于直插式样式（使用HTNL标记的style属性设置的样式）的位置最接近于样式作用的标记符，因此它通常具有高优先级。

css引⼊⽅式优先级以及不同选择器的优先级区别

我们都知道css有3种基本设置⽅式即

1、⾏内也叫嵌⼊式 例如：

2、内联式，在html⽂件中⽤style标签包裹着的 例如：

3、链接式，在html⽂件中⽤link标签引⽤进来着的 例如：

注：还有⼀种@import写法不太常⽤兼容性也有问题忽略了

当我们同时使⽤这三种⽅式来对同⼀⽬标元素设置样式的时候优先级是 ⾏内>内联>链接

⼀般情况下在同⼀种⽅式（⽂件）按照谁在后⾯谁的优先级最⾼，这个很多⼈都知道，

但是也有很多⼈忽视了不同的选择器也有优先级。

⾸先我们先来回忆下css的选择器类型吧

#id名 { 属性名:属性值; }

.class名 { 属性名:属性值; }

标签名 { 属性名:属性值; }

这是3中基本选择器还有他们相互结合的复合选择器

我们写⼀个css样式⽂件引⼊到css.html

css优先级讨论

base.css⽂件如下

@charset "utf-8";

/* CSS Document */

#red{

color:red;}

.blue{

color:blue;

}

div{

color:black;

}

这3个样式设置都是针对⼀个元素且都在链接⽂件中应该按照顺序后⾯覆盖前⾯的才对但是浏览器运⾏的结果却是

这就说明id选择器优先级最⾼ ，具体的选择器权重请看下图

通过这个图⽚我们就可以计算哪种设置的优先级⾼了，同时我们也会意识到有可能链接的优先级会⼤于嵌⼊式哦！在实际中也会经常越到这

种因问题导致的出错，现在来看⼀个实际的例⼦

在这个页⾯中针对按钮 ”下⼀步“的color属性有3次设置，⽽且都是在base.css⽂件中，后⾯的颜⾊值没有覆盖前⾯的设置变成⽩⾊，因为第

⼀个圈⾥的使⽤的是类+标签 权重为11 第⼆个使⽤类 权重是10 最后⼀个是标签权重为1 ⾃然是第⼀个设置的⽣效 解决⽅法很简单在第⼆

个选择器上改⼀下结果如下

权重值相等后⾯覆盖了前⾯，就是这些了，不⾜错误之请指出。