e[attr]屬性選擇器
e[attr=val]屬性選擇器
e[attr|=val]屬性選擇器
e[attr~=val]屬性選擇器
e[attr*=val]屬性選擇器
e[attr^=val]屬性選擇器
e[attr$=val]屬性選擇器
css**
ul, li
li
class="linksitem"
id="test_1">aali>
class="links tx">bbli>
class="bd links"
data-index="3">ccli>
class="links"
id="test_4">ddli>
class="links-last">eeli>
ul>
e[attr]：只要含有attr屬性的元素就會被選中。
如上圖，第乙個和第四個被選中。
也可以對乙個元素使用多個屬性選擇器
e[attr=val]：含有attr屬性並且屬性值為val。
需要注意的是：當屬性等於單個值時，引號可以省略，就像這樣的li[class=links]。當屬性值不是單個值時，引號不能省略，必須像這樣的li[class=」links tx」]
e[attr|=val]：屬性值等於val或則是以val-開頭的才會被選中
e[attr~=val]：當乙個屬性的值是以空格分隔的多個值並且其中乙個值等於val時就會被選中
e[attr*=val]：只要屬性attr的任意位置含有」val」就會被選中。
e[attr^=val]：只要屬性attr的值是以val開頭的就會被選中。
e[attr$=val]：只要屬性attr的值是以val結尾的就會被選中。
html**
class="selector">
我是第一段文字p>
我是第二段文字p>
div>下面運用上面的偽類選擇器來選擇元素
上面選擇器中的n，都是從1開始，而不是從0開始。也可以是even，odd等關鍵字。還可以是(-n+5)，(2n+1)等表示式，但需要注意的是，表示式中的變數只能寫為n，不能是其他的變數。如x，y等變數，那麼是錯的。
:nth-child(n),選中乙個父元素下面的第n個子元素
:nth-last-child(n),選中乙個父元素下面的倒數第n個子元素
:first-child,選中乙個父元素下面的第乙個子元素
:last-child，選中乙個父元素下面的最後乙個子元素
:nth-of-type(n)：選中乙個父元素下面的第n個子元素，並且該元素是你指定的型別。
.selector > p
:nth-of-type(2)
:nth-last-of-type(n)：選中乙個父元素下面的倒數第n個子元素，並且該元素是你指定的型別。
:first-of-type，選中父元素內具有指定型別的第乙個元素，與:nth-of-type(1)等同。
:last-of-type，選中父元素內具有指定型別的最後乙個子元素，與:nth-of-last-type(1)等同。
:only-child，選中乙個父元素下面的唯一的乙個子元素。
.selector > p
:only-child
:only-of-type，這個選擇器不好理解，可以這樣理解。
表示乙個元素有很多個子元素，而其中某乙個元素的型別是唯一的，那麼該元素就會被選中。
.selector > p
:only-of-type
:empty，用來選擇沒有任何內容的元素，這裡的「沒有任何內容「指的是一點內容都沒有，哪怕是乙個空格。這個選擇器使用者處理動態輸出內容非常方便。例如想高亮提示使用者搜尋出來的結果為空時，就可以這樣使用
#result
:empty
css3 選擇器 CSS3選擇器
子級選擇器用於選取帶有特定父元素的元素。書寫語法 element1 element2 注意 如果 element2 元素不是父元素 element1 的直接子元素，則不會被選擇。符號之前書寫父級的選擇器，符號之後寫子級選擇器，必須滿足父子級關係才選中標籤 相鄰兄弟選擇器可以用於選擇緊接在另乙個元素後...
css3 選擇器 CSS3選擇器詳解
css3在css2基礎上，增強或新增了許多特性，彌補了css2的眾多不足之處，使得web開發變得更為高效和便捷。比如說，同樣是乙個頭像，可能在低版本的瀏覽器中，頭像方的 在高版本的瀏覽器中，頭像是圓的。漸進增強和優雅降級之間的不同 面試題目 由於css3普遍存在相容性問題，為了避免因相容性帶來的干擾...
CSS3學習筆記 選擇器
css3 選擇器 1.1屬性選擇器 e attr value 指定屬性名，找到以value開頭的屬性值 e attr value 指定屬性名，找到以value結尾的屬性值 e attr value 指定屬性名，找到包含value開頭的屬性值 1.2為類選擇器 1.2.1 使用者介面相關的 e ena...