h5-4

通配选择器　　　*表示所有的标签

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>