常见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 元素）
【属性选择器】
1、a[class]：匹配具有 class 属性值的 a 的元素
2、a[target="_blank"]：匹配 target 属性值等于 _blank 的 a 元素
3、a[href^="https"]：匹配 href 属性值以 https 开头的 a 元素
4、a[href$=".jpg"]：匹配 href 属性值以 .jpg 结尾的 a 元素
5、a[href*="baike"]：匹配 href 属性值包含 baike 的 a 元素
6、a[class~="abc"]：匹配 class 属性值以空格为分隔符，其中有⼀个等于 abc 的 a 元素
伪类选择器和伪元素选择器使⽤频率不⾼，本⽂暂不说明，详细⽰例可参考：
⼆、CSS选择器权重和优先级
共分为5个等级：
第1等：提升指定样式规则的应⽤优先权，如：color:red !important，权值为10000（不建议使⽤）
第2等：代表内联样式，如: ，权值为1000
第3等：代表ID选择器，如：#content，权值为100
第4等：代表类，伪类和属性选择器，如.content，:hover，[attribute]，权值为10
第5等：代表元素选择器和伪元素选择器，如div，p，权值为1
通⽤选择器（*），⼦选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0
三、CSS选择器权重计算
1、元素被两个css样式选中，选择权重⼤的样式，如果权重⼀样，以css中后出现的为准
2、元素没有被css样式选中，要显⽰继承的样式时，使⽤就近原则
2、继承的样式权重为0（color、 text-开头的、line-开头的、font-开头的样式都可以继承）判断⼀块内容的样式是什么？按照以下步骤：
HTML代码：
<div id="content">
<div id="main-content">
<h2>CSS简介</h2>
<p>CSS是⼀组格式设置规则，⽤于控制Web页⾯的外观。</p>
<div class="paragraph">
<h2 class="first">使⽤CSS布局的优点</h2>
<p>1、表现和内容相分离 2、提⾼页⾯浏览速度 3、易于维护和改版</p>
</div>
</div>
</div>
CSS代码：
/* 100(#main-content) + 10(class="paragraph") + 1(h2) = 111 */
#main-content [class="paragraph"] h2 {
color:yellow;
}
/* 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) = 112 */
#main-content div.paragraph h2 {
color:orange;
}
/* 1(body) + 100(#content) + 1(div) + 10([id="main-content"]) + 1(h2) = 113 */
body #content div[id="main-content"] h2 {
color:green;
}
/* 1(div) + 100(#main-content) + 1(div) + 10(.paragraph) + 1(h2) + 10(.first) = 123 */ div#main-content div.paragraph h2.first {
color:pink;
}cssclass属性
/* 100(#content) + 100(#main-content) + 1(h2) = 201 */
#content #main-content>h2 {
color:blue
}
/* 100(#content) + 1(div) + 100(#main-content) + 1(h2) = 202 */
#content div#main-content h2{
color:red;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。