要點(diǎn)總結(jié)

        兄弟選擇器
        1、選擇指定標(biāo)簽后面所有的兄弟節(jié)點(diǎn)
        p~ul{
            background-color: red;
        }
         屬性選擇器
        2、選擇屬性以指定字符串開(kāi)頭的標(biāo)簽
        li[index^="ab"]{
            background-color: red;
        }
        
        3、選擇以指定字符串結(jié)尾的標(biāo)簽
        li[class$="b"]{
            background-color: red;
        }
        
        4、選擇屬性中包含某個(gè)字符串的標(biāo)簽
        li[class*="x1"]{
            background-color: red;
        }
        
        5、選擇第一個(gè)指定的標(biāo)簽
        p:first-of-type{
            background-color: red;
        }
        
        6、選擇最后一個(gè)指定的標(biāo)簽
        p:last-of-type{
            background-color: red;
        }
        
        7、選擇在其父級(jí)下該類(lèi)型唯一的一個(gè)子元素
           該子元素可以有其他類(lèi)型不一樣的兄弟元素
        p:only-of-type{
            background-color: yellow;
        }
        
        8、選擇其父級(jí)下的第n個(gè)標(biāo)簽,只在指定的子元素中查找
        p:nth-of-type(1){
            background-color: red;
        }
        
        9、選擇在其父級(jí)下的唯一的一個(gè)子元素
              選中的子元素完全唯一，其父級(jí)只有這一個(gè)子元素,只要有兄弟節(jié)點(diǎn)就不滿(mǎn)足條件
        h3:only-child{
            background-color: red;
        }
        p:only-child{
            background-color: red;
        }
        
        10、選擇其父級(jí)下的第n個(gè)子元素,從其父級(jí)的第一個(gè)子元素開(kāi)始計(jì)數(shù)，一直數(shù)到第n個(gè),如果找到的標(biāo)簽與指定的相同，那么會(huì)選中，否則沒(méi)反應(yīng)
        p:nth-child(2){
            background-color: red;
        }
        p:nth-of-type(3){
            background-color: red;
        }
        
        11、選擇器父級(jí)下的倒數(shù)第n個(gè)子元素，從最后一個(gè)開(kāi)始計(jì)數(shù)，一直數(shù)到第n個(gè),如果找到的標(biāo)簽與指定的相同，那么會(huì)選中，否則沒(méi)反應(yīng)
        p:nth-last-of-type(3){
            background-color: red;
        }
        12、last-child 選擇最后一個(gè)子節(jié)點(diǎn)
        p:last-child{
            background-color: red;
        }
        
        13、root根節(jié)點(diǎn)
        :root{
            background-color: #BCBCBC;
        }
        
        14、empty選擇空節(jié)點(diǎn)，如果有文本內(nèi)容，即使是一個(gè)空格，也不算空標(biāo)簽
        :empty{
            background-color: red;
        }
        
        15、target選擇當(dāng)前活動(dòng)狀態(tài)的a標(biāo)簽指向的目標(biāo)
        :target{
            background-color: #AAAAAA;
            color: #fff;
        }
        
        16、enabled選擇可操作的input標(biāo)簽
        :enabled{
            height: 40px;
        }
        
        17、disabled選擇不可操作的input標(biāo)簽
        :disabled{
            height: 50px;
        }
        
        18、checked選擇被選中的input標(biāo)簽
        :checked{
            width: 50px;
            height: 50px;
        }
        
        19、not()選擇除了指定標(biāo)簽的其他所有標(biāo)簽
        div:first-of-type :not(p){
            background-color: red;
        }
        
        20、選擇指定標(biāo)簽里面被選中的文本內(nèi)容
        ::selection{
            color: #ffffff;
            background-color: #BCBCBC;
        }

與js有很多的共同之處，都是選擇出滿(mǎn)足各種條件的元素，不過(guò)一個(gè)是應(yīng)用于 js 里，一個(gè)應(yīng)用于 css 里。
其中容易混淆于模糊的點(diǎn)也一樣：
1 . only-of-type 與 only-child ------ 前者強(qiáng)調(diào)的是子元素中指定標(biāo)簽唯一 后者則是子元素必須位移
2 . nth-of-type() 與 nth-child() ------ 前者強(qiáng)調(diào)某類(lèi)標(biāo)簽中的第幾個(gè) 后者則是子元素中的第幾個(gè)，如果找到的標(biāo)簽與指定的相同，那么會(huì)選中，否則沒(méi)反應(yīng)
3 . :empty -------------有空格也不能算作空

?。?！原生js的內(nèi)容需要進(jìn)行回顧，在學(xué)習(xí)過(guò)jQuery之后對(duì)于原生js所具有的寫(xiě)法和內(nèi)容開(kāi)始與jq混淆了！??！