CSS选择器和优先级

最新推荐文章于 2024-09-28 18:51:04 发布
徐同保
最新推荐文章于 2024-09-28 18:51:04 发布
阅读量252
点赞数 1
分类专栏： web前端前端技术分享文章标签： css
本文链接：https://blog.csdn.net/xutongbao/article/details/78647829
版权
web前端同时被 2 个专栏收录
735 篇文章 16 订阅
订阅专栏
前端技术分享
271 篇文章 3 订阅
订阅专栏
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <style type="text/css">
        /*
        CSS优先级
        不同级别
        1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
        2.作为style属性写在元素内的样式
        3.id选择器
        4.类选择器
        5.标签选择器
        6.通配符选择器
        7.浏览器自定义
        同一级别
        同一级别中后写的会覆盖先写的样式
         */
        #myId {
            color:green;
        }
        .my-class {
            color:blue;
        }
        p {
            color:red;
        }
        * {
            color:pink;
            font-size: 24px;
        }

        .my-class-a, .my-class-b {
            color:orange;
        }
        .my-class-c .my-class-d {
            color: purple;
        }
        .my-class-e>.my-class-f {
            color: gold;
        }  
        .my-class-g+.my-class-h {
            color: wheat;
        }    
        .my-class-i~.my-class-j {
            color: darkviolet;
        }  
        .my-class-k.my-class-l {
            color: saddlebrown;
        }
        .my-class-m[title] {
            color:orangered;
        } 
        .my-class-m[title=value1] {
            color:darkgreen;
        }     
        .my-class-m[title~=hello] {
            background:green;
        }    
        .my-class-m[title|=value2] {
            background:blue;
        }   
        .my-class-m[title^=value3] {
            background:red;
        } 
        .my-class-m[title$=value4] {
            background:pink;
        }   
        .my-class-m[title*=value5] {
            background:orange;
        }   
        .my-class-n:first-child{
            background-color:purple;
        }
        a:link {
            color: gold;
        }  
        a:visited {
            color: wheat;
        }  
        a:active {
            color: darkviolet;
        }  
        a:hover {
            color: saddlebrown;
        }
        .my-class-o:focus{
            border: 2px solid orangered;
        }
        .my-class-p:lang(zh) {
            background: darkgreen;
        }
        .my-class-q button:enabled {
            background: green;
        }
        .my-class-q button:disabled {
            background: #ddd;
        }   
        .my-class-r input:checked+span:after {
            content: "我被选中了";
        }         
        .my-class-s::selection {
            background:green;
            color:pink;
        }  
        .my-class-t span:nth-child(2) {
            color:blue;
        }   
        .my-class-u span:nth-last-child(3) {
            color:blue;
        }  
        .my-class-v p:nth-of-type(2) {
            color:blue;
        }   
        .my-class-w p:nth-last-of-type(2) {
            color:blue;
        }                                   
        .my-class-x:last-child{
            background-color:purple;
        }
        .my-class-y p:first-of-type{
            background-color:purple;
        }      
        .my-class-z p:last-of-type{
            background-color:purple;
        }      
        .my-class-aa span:only-child{
            background-color:purple;
        }  
        .my-class-bb span:only-of-type{
            background-color:purple;
        }    
        .my-class-cc:empty{
            background-color:purple;
        }    
        .my-class-dd span:not(.my-style) {
            background-color:purple;
        } 
        .my-class-ee:first-line {
            background-color:purple;
        } 
        .my-class-ff:first-letter {
            background-color:purple;
        }   
        .my-class-gg:before{
            content: 'xutongbao:'
        } 
        .my-class-hh:after{
            content: 'xutongbao:'
        }                                                                             
    </style>
</head>  
<body>  
    <div style="color:yellow!important">!important</div>
    <div style="color:red">style</div>
    <div id="myId">#id</div>
    <div class="my-class">.class</div>
    <p>element</p>
    <span>*</span>
    <div class="my-class-a">E,F</div>
    <div class="my-class-b">E,F</div>
    <div class="my-class-c">
        <div class="my-class-d">E F</div>
    </div>
    <div class="my-class-e">
        <div class="my-class-f">E>F<span>不匹配</span></div>
    </div>
    <div class="my-class-g">不匹配</div>
    <div class="my-class-h">E+F</div>
    <span>不匹配</span>
    <div>
        <div class="my-class-i">不匹配</div>
        <div class="my-class-j">E~F</div>
        <div class="my-class-j">E~F</div>
        <div class="my-class-j">E~F</div>
    </div>
    <div class="my-class-k my-class-l">.class1.class2</div>
    <div class="my-class-m" title>E[attr]</div>
    <div class="my-class-m" title="value1">E[attr=value]</div>
    <div class="my-class-m" title="value1 hello my world">E[attr~=value]</div>
    <div class="my-class-m" title="value2-hello-my-world">E[attr|=value]</div>
    <div class="my-class-m" title="value3a">E[attr^=value]</div>
    <div class="my-class-m" title="value3a">E[attr^=value]</div>
    <div class="my-class-m" title="avalue4">E[attr$=value]</div>
    <div class="my-class-m" title="bvalue4">E[attr$=value]</div>
    <div class="my-class-m" title="bvalue5c">E[attr*=value]</div>
    <div>
        <p class="my-class-n">E:first-child，这个段落是其父元素（div）的首个子元素。</p>
        <p class="my-class-n">这个段落不是其父元素的首个子元素。</p>
    </div>
    <a href="http://www.baidu.com">E:link,E:visited,E:active,E:hover</a>
    <input type="input" class="my-class-o" value="E:focus" style="display: block;">
    <div lang="zh" class="my-class-p">E:lang(C)</div>
    <div class="my-class-q">
        <button>E:enabled</button>
        <button disabled="true">E:disabled</button>    
    </div>
    <div class="my-class-r">
        <ul>
            <li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
            <li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
            <li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
        </ul>
    </div>
    <p class="my-class-s">你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>
    <div class="my-class-t">
        <span>E:nth-child(n)</span><span>E:nth-child(n)</span><span>E:nth-child(n)</span>
    </div>
    <div class="my-class-u">
        <span>E:nth-last-child(n)</span><span>E:nth-last-child(n)</span><span>E:nth-last-child(n)</span>
    </div>   
    <div class="my-class-v">
        <p>E:nth-of-type(n)</p><p>E:nth-of-type(n)</p>
        <span>E:nth-of-type(n)</span><span>E:nth-of-type(n)</span><span>E:nth-of-type(n)</span>
    </div>  
    <div class="my-class-w">
        <p>E:nth-last-of-type(n)</p><p>E:nth-last-of-type(n)</p>
        <span>E:nth-last-of-type(n)</span><span>E:nth-last-of-type(n)</span><span>E:nth-last-of-type(n)</span>
    </div>   
    <div>
        <p>last-child</p><p class="my-class-x">last-child</p>
    </div>  
    <div class="my-class-y">
        <span>first-of-type</span>
        <p>first-of-type</p><p>first-of-type</p>
    </div>  
    <div class="my-class-z">
        <span>last-of-type</span>
        <p>last-of-type</p><p>last-of-type</p>
    </div>  
    <div class="my-class-aa">
        <span>only-child</span>
    </div> 
    <div class="my-class-bb">
        <span>only-of-type</span>
    </div>     
    <div class="my-class-cc" style="width: 100%;height: 20px;"></div>  
    <div class="my-class-dd"><span>E:not(selector)</span><span class="my-style">E:not(selector)</span><span>E:not(selector)</span></div>       
    <p class="my-class-ee" style="width: 10px;">E:first-lineE:first-lineE:first-lineE:first-lineE:first-lineE:first-lineE:first-line</p> 
    <p class="my-class-ff">Eg:first-letterE:first-letterE:first-letter</p> 
    <div class="my-class-gg">E:before</div>
    <div class="my-class-hh">E:after</div>
</body>  
</html>