CSS —— 选择器

选择器种类

  • 标签选择器
  • id选择器
  • 类选择器
  • 通配符
  • 交集选择器
  • 并集选择器
  • 后代选择器
  • 子代选择器

选择器设置样式优先级

默认样式 < 继承样式 < 通配符设置样式 < 标签选择器设置样式 < 类选择器设置样式 < id选择器设置样式 < 行内样式 < !important

选择器权重计算

1. 判断是否继承，若不是继承则进行下一步

2. （0.0.0.0）
    第一个数表示当前选择器中important的个数
    第二个数表示当前选择器中id选择器的个数
    第三个数表示当前选择器中类选择器的个数
    第四个数表示当前选择器中标签选择器的个数
    
3. 比较：从第一个数开始比较，如果第一个数大，那么这个选择器的权重就大，相应的优先级就高，如果一样，再比较下一个，依此类推

习题练习（答案在最后，先做再看哦~）

1
<style type="text/css">
    #father #son
        color:blue; 
    }
    #father p.c2
        color:black;
    }
    div.c1 p.c2
        color:red;
    }
    #father{
        color:green !important;
    }    
            
    div#father.c1 {  
        color: yellow;
    }    
</style>
<body>
    <div id="father" class="c1">
        <p id="son" class="c2">
            这行字体是什么颜色的？
        </p>
    </div>
</body>

 

2
<style type="text/css">
    #father{
        color:red;
    }
    p{
        color:blue;
    }
</style>
<body>
    <div id="father">
        <p>这行字体是什么颜色的？</p>
    </div>
</body>

 

3
<style type="text/css">
    div p{ 
        color:yellow;
    }
    #father{
        color:red;
    }
    p.c2{ 
        color:blue;
    }
</style>
<body>
    <div id="father" class="c1">
        <p class="c2">
            试问这行字体是什么颜色的？ 
        </p>
    </div>
</body>

 

4
<style type="text/css">
    div div{
        color:blue;
    }
    div{
        color:red;
    }
</style>
<body>
    <div>
        abc 
        <div>
            def  
            <div>
                试问这行字体是什么颜色的？
            </div>
        </div>
    </div>
</body>

 

5
<style type="text/css">
    div div div div div div div div div div div div{  
        color:red; 
    }
    .me{
        color:blue;
    }
</style>
<body>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <div class="me">试问这行文字是什么颜色的</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

 

6
<style type="text/css">
    .c1 .c2 div{ 
        color: blue;
    }    
    #box1 div{
        color:yellow;
        }        
    div #box3{
        color:green;
    }
</style>
<body>
    <div id="box1" class="c1">
        <div id="box2" class="c2">
            <div id="box3" class="c3">
                文字 
            </div>
        </div>
    </div>
</body>

 

这里是答案

  • 做完了才能看哦~
  1. blue
  2. blue
  3. blue
  4. blue
  5. blue
  6. green

做完了有疑问可以留言哦~

posted @ 2017-01-11 00:13  Binnear  阅读(207)  评论(0)  编辑  收藏  举报