欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS选择器和优先级

程序员文章站 2024-01-29 17:59:58
...

<!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>  

CSS选择器和优先级














相关标签: css