一、屬性選擇器

• Element[attr]只使用屬性名，但沒有確定任何屬性值

  p[cxy]{background: red;color: white;}

• Element[type="text"]指定屬性名，並指定了該屬性的屬性值

p[cxy=html]{background: red;color: white;}p[cxy='css']{background: red;color: white;}

• Element[attr~="value"]指定屬性名，屬性值是一個列表，並且以空格隔開，其中列表中包含了一個value詞

html
// 包含有html的元素p[cxy~=html]{color: yellow;}// p[cxy=html]{color: yellow;} 這是獲取不到對應元素的

• Element[attr^="value"]指定了屬性名，並且有屬性值，屬性值是以value開頭的

javascript
jquery
  
  // 以j開頭的元素
  p[cxy^=j]{ color: yellow; }

• Element[attr$="value"]指定了屬性名，並且有屬性值，而且屬性值是以value結束的

// 以s結尾的元素p[cxy$=s]{ color: blue; }

• Element[attr*="value"]指定了屬性名，並且有屬性值，而且屬值中包含了value

// 只要是包含css的元素p[cxy*=css]{ color: black; }

• Element[attr|="value"]指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）

// 以'z-'開頭的屬性，或屬性為'z'的元素
p[cxy|=z]{ color: black;}

案例: 百度文庫

二、結構性偽類選擇器

• Element:nth-child(n)  表示Element父元素中的第n個位元組點

p:nth-child(odd){background:red}  // 匹配奇數行p:nth-child(even){background:red} // 匹配偶數行p:nth-child(2n){background:red}  // 偶數p:nth-child(1){ background: red;}  // 第一元素

p:nth-child(1){ background: red;}指找p標籤父級下的第一個子元素，並且這個元素是p標籤

    
 1、星期一 
  <!--  p:nth-child(1) --&gt
    
 測試 
    <!-- h1:nth-child(2) --&gt

• Element:nth-last-child(n) 表示Element父元素中的第n個位元組點，從後向前計算

p:nth-last-child(1){ background: red;}  // 最後一個元素

• Element:nth-of-type(n)  表示Element父元素中型別為Element的第n個位元組點

p:nth-of-type(2){background: red;}  // 找p標籤父級下的第二個p

• Element:nth-last-of-type(n)表示Element父元素中的第n個位元組點，且型別為Element，從後向前計算

p:nth-last-of-type(2){background: red;}  // 找p標籤父級下的倒數第二個p

• Element:first-child 表示Element元素中的第一個子節點

h1:first-child{ background: red;}  // 等同於p:nth-child(1)

• Element:last-child 表示Element元素中的最後一個子節點

h1: last-child{ background: red;}  // 等同於p:nth-last-child(1)

• Element:first-of-type 表示Element父元素中的第一個子節點且節點型別是Element的

h1:first-of-type{background: red;}  // 等同於nth-of-type(1)

• Element:last-of-type 表示Element父元素中的最後一個子節點且節點型別是Element的

h1:last-of-type{background: red;}  // 等同於nth-last-of-type(1)

三、偽類選擇器

• E:target 表示當前的URL片段的元素型別，這個元素必須是E

// { display: block; }  // url中的hash值

• E:disabled 表示不可點選的表單控制元件

input: disabled{color: red;}

• E:enabled 表示可點選的表單控制元件

input: enabled{color: gray;}

• E:checked 表示已選中的checkbox或radio

input:checked{ width: 50px; height: 50px; }

案例: 改變單選框/核取方塊樣式

• E:first-line 表示E元素中的第一行

p:first-line{ color: red; }

• E:first-letter 表示E元素中的第一個字元

p:first-letter{font-size: 30px;}

• E::selection表示E元素在使用者選中文字時

p::selection{ background: red;color: white; }

• E::before 生成內容在E元素前

p:before{ content: '你是誰啊?'; display: block;}

• E::after 生成內容在E元素後

p: after{ content: '你是誰啊?'; display: block;}

• E:not(s) 表示E元素中，s元素不被匹配

// p元素中，元素名為.view2的不被匹配到p:not(.view2){ color: blue;}

• E~F表示E元素毗鄰的F元素(即E元素之後的)

p~h1{ background: red;}  // p後面的h1元素才生效

• Content 屬性

p: after{ content: '你是誰啊?'; }

四、子元素選擇器

不希望選擇任意後代，縮小範圍，只選擇某個元素的子元素，即可以使用子元素選擇器；

• E1 > E2  表示E1的子元素中所有的E2

  // 即h1子元素的所有strong
  h1 > strong {color:red;}

五、相鄰兄弟選擇器

• E1 + E2  表示E1元素後面的E2(E1和E2父元素一致)

  h1 + p {margin-top:50px;}

作者：EndEvent
連結：