HTML5新增的Css選擇器、偽類介紹

    HTML5新增了Css選擇器、偽類，本文整理了一些，并給出簡單的使用介紹，喜歡html5的朋友可以參考下，希望對大家有所幫助
    選擇器
    p[name^=“my”]{font-size:14px}
    選擇器 ^= 講規(guī)則應(yīng)用到所有 name屬性以“my”開頭的<p>元素標簽
    p[name$=“my”]{font-size:14px}
    選擇器 $= 講規(guī)則應(yīng)用到所有 name屬性以“my”結(jié)尾的<p>元素標簽
    p[name*=“my”]{font-size:14px}
    選擇器 $= 講規(guī)則應(yīng)用到所有 name屬性包含“my”結(jié)尾的<p>元素上
    選擇器 > 、 + 、~
    選擇器>表示受影響的元素是第一個元素的子元素。
    選擇器+這 個選擇器引用緊跟元素之后的元素，這兩個元素必須有相同父級。
    選擇器~與+類似，但受影響的元素不一定緊跟第一個元素。
    偽類與引用元素名稱之間要加“:”
    例：myclass:nth-child(2)
    myclass元素中的第二個素
    關(guān)鍵字“odd” ，“even”
    myclass:nth-child(odd)：影響其父元素索引位置為奇數(shù)的
    myclass:nth-child(even)：影響其父元素索引位置為偶數(shù)的
    代碼如下:
    <style>
    .test:nth-child(odd)
    {
    color:Blue;
    }
    .test:nth-child(even)
    {
    color: Red;
    }
    .test:nth-child(2)
    {
    color: Green;
    }
    </style>
    <div>
    <p>
    1
    </p>
    <p>
    2
    </p>
    </div>
    <p>
    1
    </p>
    <p>
    2
    </p>
    <p>
    1
    </p>
    <p>
    2
    </p>
    效果如下：
    1
    2
    1
    2
    1
    2
    否定偽類
    :not(p){color:red}
    除了<p>元素之外的其他元素都為red