通配选择器 *表示所有的标签
1 <div>div</div> 2 <p>p</p> 3 <h1>h1</h1> 4 <ul> 5 <li>item</li> 6 <li>item</li> 7 <li>item</li> 8 </ul>
1 <style>
2 /* 通配符选择器效率低 所以很多工程上很少使用 */
3 *{
4 color:red;
5 }
6 </style>
高级选择器
后代选择器 div p 表示div中所有后代p
1 <ul> 2 <li><p>111</p></li> 3 <li>222</li> 4 <li>333</li> 5 <li>444</li> 6 </ul> 7 <div class="box"> 8 <ul> 9 <li>item</li> 10 </ul> 11 </div>
1 <style>
2 /* ul li{
3 空格表示后代
4 font-size: 30px;
5 color:green; 字体颜色
6 } */
7 .box li{
8 background-color: skyblue;
9 }
10 </style>
交集选择器 div.box{ } div.box li{ } p.p1#p1 (ie6不支持连续交集写法）
1 <div class="box"> 2 <ul> 3 <li>item</li> 4 </ul> 5 </div> 6 7 <div>这是第二个div</div>
1 div.box{
2 background-color: red;
3 }
并集选择器
div，p，h1，li {
color：red；
}
css两性-继承性与层叠性
继承性 css中有一部分属性可以被继承，比如文字和文本的属性color，font-size，font-family，font-*，text-。即便标签本身不设置 也能被加载
1 <div class="box"> 2 <ul> 3 <li>item1</li> 4 <li>item2</li> 5 <li>item3</li> 6 </ul> 7 </div>
1 <style>
2 body{
3 font-size:16px;
4 }
5 div.box{
6 background-color: #ccc;
7 font-size: 30px;
8 font-family: "微软雅黑";
9 color:red;
10 height:300px;
11 }
12 </style>
层叠性
1 <div id="box1" class="box1"> 2 <div id="box2" class="box2"> 3 <div id="box3" class="box3"> 4 <p>我的颜色到底听谁的?</p> 5 </div> 6 </div> 7 </div>
1 <style>
2 /* 以下三种选择器都可以直接选择到p，此时比较权重
3 id选择器个数 class选择器个数 标签选择器个数
4 1 2 1
5 1 2 3
6 1 1 2
7 */
8 #box1 .box2 .box3 p{
9 color:red;
10 }
11 #box1 div.box2 div.box3 p{
12 color:green;
13 /* 权重最高 */
14 }
15 .box1 #box2 div p{
16 color:blue;
17 }
18 </style>
2、
1 <div id="box1" class="box1"> 2 <div id="box2" class="box2"> 3 <div id="box3" class="box3"> 4 <p>我的颜色到底听谁的?</p> 5 </div> 6 </div> 7 </div>
<style>
/* 以下三种选择器都可以直接选择到p，此时比较权重
id选择器个数 class选择器个数 标签选择器个数
1 2 1
1 2 1
1 2 1
以上权重相同，谁写在最后听谁的
*/
.box1 #box2 .box3 p{
color:red;
}
#box1 .box2 .box3 p{
color:green;
}
.box1 .box2 #box3 p{
color:blue;
}
</style>
3、
<style>
/*
三种选择器都没有直接选择元素 通过继承让p拥有属性，此时看谁描述的近就听谁的
*/
#box1 {
color:red;
}
.box1 .box2 .box3 {
color:blue;
}
.box1 #box2 {
color:green;
}
</style>
4、
/*
三种选择器都没有直接选择元素 通过继承让p拥有属性，此时看谁描述的近，就听谁的，假如描述的一样近,
此时再比较权重，权重谁最高就听谁的，加入权重一样，以代码的顺序为准，听后面的
id选择器个数 class选择器个数 标签选择器个数
2 1 0
0 3 0
2 1 0
*/
#box1 .box2 #box3 {
color:red;
}
.box1 .box2 .box3 {
color:blue;
}
.box1 #box2 #box3 {
color:green;
}
<div id="box1" class="box1">
<div id="box2" class="box2">
<div id="box3" class="box3">
<p>我的颜色到底听谁的?</p>
</div>
</div>
</div>
原文地址：https://www.cnblogs.com/qianfur/p/12284933.html