CSS选择器的优先级
** !important > 行间样式 > id > class|属性|伪类 > 标签选择器|伪元素 > 通配符 **
复杂的选择器
CSS选择器权重值主要用于复杂选择器的权重计算,一般的选择器依据优先级判断即可。
1. 父子选择器/派生选择器
<div>
<strong>
<em>234</em>
</strong>
</div>
div strong em{
background-color: red;
}
效果如下(浏览器页面放大了5倍,方便观察,下文不再特殊说明):

父子选择器不是只针对标签,也可以是类或者id,比如:
<div class="wrapper">
<strong class="box">
<em>234</em>
</strong>
</div>
类与标签的父子选择器 ```css /div strong em{ background-color: red; }/
.wrapper .box em{ background-color: green; }
效果如下:

类、id以及标签的父子选择器
```html
<div class="wrapper">
<strong class="box" id="box1">
<em>234</em>
</strong>
</div>
/*div strong em{
background-color: red;
}*/
/*.wrapper .box em{
background-color: green;
}*/
.wrapper #box1 em{
background-color: yellow;
}
效果如下:

父子选择器的生效范围:直接的或者间接的子选择器均生效。
<div class="wrapper">
<em>1</em>
<strong class="box" id="box1">
<em>234</em>
</strong>
</div>
/*div strong em{
background-color: red;
}*/
/*.wrapper .box em{
background-color: green;
}*/
/*.wrapper #box1 em{
background-color: yellow;
}*/
div em{
background-color: red;
}
效果如下:
2.直接子元素选择器
<div class="wrapper">
<em>1</em>
<strong class="box" id="box1">
<em>234</em>
</strong>
</div>
/*div strong em{
background-color: red;
}*/
/*.wrapper .box em{
background-color: green;
}*/
/*.wrapper #box1 em{
background-color: yellow;
}*/
div em{
background-color: red;
}
div > em{
background-color: green;
}
效果如下:

简单的理解是:它的生效范围仅仅为父子选择器中直接的子选择器
父子选择器的浏览器解释顺序

<section>
<div>
<p>
<a href="">
<span></span>
</a>
</p>
<ul>
<li>
<a href="">
<span>
<em>1</em>
</span>
</a>
<p></p>
</li>
<li></li>
</ul>
</div>
<a href="">
<p>
<em>2</em>
</p>
<div></div>
</a>
</section>
section div ul li a em{
background-color: red;
}
效果如下:
问题来了,父子选择器的解释到底是从左到右呢,还是从右到左呢?
假设从左到右:
因为父子选择器的生效范围包括直接和间接的子选择器,会先找所有的 section 的标签,然后再找 section 下包含了 div 的选择器,不管是间接的还是直接的,这个时候已经有两条路径了,再找 div 下的所有 ul,…… ,依次类推
假设从右到左:

对比下来,明显可以发现,从右到左的解释判断更少、路径更少,也就是解释速度更快
结论:父子选择器的浏览器解释顺序是从右到左的
3.并列选择器
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
div.demo{
background-color: red;
}
ps.并列选择器之间没有空格
效果如下:
4. 分组选择器
<em>1</em>
<strong>2</strong>
<span>3</span>
em, strong, span{
background-color:red;
}
效果如下:

然而在实际的开发中,css 一般用如下的写法,便于观察:
em,
strong,
span{
background-color:red;
}
效果是一样的,只不过更便于阅读。
CSS选择器权重值
选择器 | 权重 |
---|---|
!important | Infinity |
行间样式 | 1000 |
id | 100 |
class&属性&伪类 | 10 |
标签选择器&伪元素 | 1 |
通配符 | 0 |
以上数字的进制为256进制
复杂选择器的权重计算
<div class="classDiv" id="idDiv">
<p class="classP" id="idP">1</p>
</div>
#idDiv p{
background-color: red;
}
.classDiv .classP{
background-color: green;
}
效果如下:

为什么呢?
id选择器的权重值为100,class选择器的权重值为10,标签选择器的权重值为1
那么,很明显, (#idDiv + p) > (.classDiv + .classP),所以(#idDiv + p)生效了。
如果两个复杂选择器的权重值相同,那么写在后面的复杂选择器生效。
再比如: ```css div#idDiv p.classP{ background-color: red!important; }
div .classDiv#idP{ background-color: green!important; }
效果如下:

为什么呢?
**在计算机的数学计算里,(无线大 + 1) > 无限大,这个跟数学计算不一样。**