日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

CSS樣式：樣式的沖突 樣式的繼承 偽元素 偽類

作者：那人獨釣寒江雪. 更新時間： 2022-07-12 編程語言 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /*
    id選擇器
        作用：根據元素的id屬性值選中一個元素
        語法:#id屬性值{}
        例子：#box{} #red{} 

    類選擇器
        作用：根據元素的class屬性值選中一組元素
        語法：.class屬性值

    通配選擇器
        作用：選中頁面中的所有元素
        語法：*    

    將class為red的div字體大小設置為30px
    
    交集選擇器
        作用：選中同時符合多個條件的元素
        語法：選擇器1選擇器2
        注意點：
            交集選擇器中如果有元素選擇器,必須使用元素選擇器開頭


    選擇器分組（并集選擇器）        
        作用：同時選擇多個選擇器對應的元素
        語法：選擇器1,選擇器2,選擇器3

    p+span{
        color:red;
    }
    表示選擇器應用在div的父元素下的子元素p后面的span里。不包含p里面的span

    p ~ span{
        color:red;
    }
    表示選擇下邊
    
    子元素選擇器
        作用：選中指定父元素的指定子元素
        語法：父元素 > 子元素

    .box > span{
        color : orange;
    }

    */
    #red {
        color: red;
    }
    .red {
        color: yellow;
    }
    .blue {
        color: brown;
    }
    p + span{
        color: black;
    }
    p[title] {/* 可加* 元素選擇器[屬性選擇器]
        p[title=abc] 改變指定一個元素
        p[title^=abc] 選擇屬性值以指定值開頭的元素 
        p[title$=abc] 選擇屬性值以指定值結尾的元素
        p[title*=abc] 包含abc元素
        */
        color: orange;
    }
    /* 
    偽類（不存在類，特殊的類）
        -偽類用來描述一個元素的特殊狀態
            比如：第一個子元素、被點擊的元素、鼠標移入的元素.....
        -偽類一般情況下都是使用：開頭
            :first-child 第一個子元素
            :last-child 最后一個子元素
            ：nth-child() 選中n個子元素
                特殊值：
                    n第n個 n的范圍為0到正無窮
                    2n或even表示偶數位的元素
                    2n+1或odd表示奇數數位的元素
                
                -以上這些偽類都是根據所有的子元素進行排序 而不是第一個li
                :first-of-type
                :last-of-type
                :nth-of-type()
                        -這幾個偽類的功能和上訴類似,不同點是他們在同類元素中排序,對不同元素不做任何改變


    */
    ul >li:first-child{
        color: black;
    }
    ul >li:last-child{
        color: brown;
    }
    ul >li:nth-child(n){
        color: chartreuse;
    }
    ul >li:not(:nth-child(3)){
        color: yellowgreen;
    }
    ul >li:not(:nth-of-type(3)){ /* 
        同類型排序的第三個
        */
        color: yellowgreen;
    }
    </style>
</head>
<body>
    <h1 id="red">標題</h1>
    <p class="red">少小離家老大回</p>
    <div class="blue">選擇器2</div>
    <div class="lan">
        <p title="abc">兒童相見不相識</p>
        <p title="hello">秋水共長天一色</p>
        <span>345</span>
    </div>
    
    <ul>
        <span>我是一個span</span>
        <li>第一個</li>
        <li> 第二個</li>
        <li> 第三個</li>
        <li>第四個 </li>
    </ul>
</body>
</html>

原文鏈接：https://blog.csdn.net/m0_62491934/article/details/125541546

欄目分類
最近更新