CSS3選擇器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS3選擇器</title>
        <style type="text/css">
            /*子代選擇器
              就是單指section子級(jí)里面的div，孫子級(jí)的div不會(huì)被選中
              
              * P標(biāo)簽嵌套其他塊級(jí)標(biāo)簽的時(shí)候，會(huì)把P標(biāo)簽分成2個(gè)*/
            /*section>div{
                background: red;
            }*/
            /*兄弟選擇器
             和div同級(jí)的section，
             section是緊跟在div后面的第一個(gè)section*/
            /*div + section{
                background-color: greenyellow;
            }*/
            
            /*兄弟選擇器
             所有和div同級(jí)，并且在div后面的section*/
            /*div ~ section{
                background: red;
            }*/
            
            /*偽類選擇器*/
            /*所有兄弟姐妹中最大的div
             1、從所有兄弟姐妹中尋找第幾個(gè)
             2、找到的這個(gè)標(biāo)簽類型必須符合：前面的類型（div）*/
            /*div:nth-child(1){
                background-color: red;
            }*/
            /*div:first-child{
                
            }
            div:last-child{
                
            }*/
            /*在和div同一種類型的標(biāo)簽里面的第一個(gè)
                nth-child(n)在所有的同級(jí)里面查找順序把第N個(gè)標(biāo)簽
                nth-of-type(n)在所有同級(jí)并且同類型的標(biāo)簽里面查找第n個(gè)
                */
            /*div:nth-of-type(1){
                background: red;
            }*/
            /*div:first-of-type{
                background: red;
            }
            div:last-of-type{
                background-color: red;
            }*/
            
            /*.xiaoming:before{
                content: "哈哈哈";
                background-color: red;
                display: block;
                width: 200px;
            }*/
            .xiaoming{
                border: 1px solid black;
            }
            /*after和before都可以理解為是給小明添加的子級(jí)元素，
             after在最后，before在最前。默認(rèn)是行級(jí)，可以想正常標(biāo)簽一樣修改樣式。所以可以在after里面寫
             clear：both來(lái)清除浮動(dòng)*/
            .xiaoming:after{
                content: "";
                display: block;
                clear: both;
                
            }
            /*.xiaoming:after{
                content: "呵呵呵";
                background-color: blue;
                display: block;
            }*/
            
            /*屬性選擇器
                a[title]代表是帶有title屬性的a標(biāo)簽
                a[title="去騰訊"]代表的是title屬性值為“去騰訊”的a標(biāo)簽
                a[title $="去"]代表title屬性值是以去結(jié)尾的a標(biāo)簽
                a[title ^="去"]代表title屬性值是以去開頭的a標(biāo)簽
                a[title *="去"]代表title屬性值是以包含去的a標(biāo)簽*/
            a[title *="去"]{
                background-color: red;
            }
            /*input[disabled]{
                display: none;
            }*/
            /*input:not([type=submit])
                type類型不是submit的input標(biāo)簽*/
            input:not([type=submit]){
                background: bisque;
            }
            
        </style>
    </head>
    <body>
        <a href="#" title="去百度">百度</a>
        <a href="#" title="不去">騰訊</a>
        <!--選擇器-->
        <section>小明爸爸
            <div>小明哥哥</div>
            <div class="xiaoming">
                <div style="width: 300px;height: 300px;background: blue;float: left;"></div>
            </div>
            <div>小明弟弟</div>
            <section>小明大妹妹</section>
            <section>小明二妹妹</section>
        </section>
        <section>小明的叔叔
            <div>小明的堂哥</div>
            <article>小明的堂姐</article>
            <article>小明的堂妹</article>
        </section>
        
        <form action="">
            
            <input type="text"/>
            <input type="submit" />
        </form>
        
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容