通配选择器 *表示所有的标签
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>