第6章 征服CSS3選擇器

屬性選擇器

在HTML中，透過各種各樣的屬性可以給元素增加很多附加的資訊。例如，透過id屬性可以將不同div元素進行區分。

在CSS2中引入了一些屬性選擇器，而CSS3在CSS2的基礎上對屬性選擇器進行了擴充套件，新增了3個屬性選擇器，使得屬性選擇器有了萬用字元的概念，這三個屬性選擇器與CSS2的屬性選擇器共同構成了CSS功能強大的屬性選擇器。如下表所示：

屬性選擇器	功能描述
E[att^='val']	選擇匹配元素E，且E元素定義了屬性att，其屬性值以val開頭的任何字串
E[att$='val']	選擇匹配元素E，且E元素定義了屬性att，其屬性值以val結尾的任何字串
E[att*='val']	選擇匹配元素E,且E元素定義了屬性att，其屬性值的任意位置包含了val

示例：

a[class^=icon]{  background: green;  color:#fff;
}a[href$=pdf]{  background: orange;  color: #fff;
}a[title*=more]{  background: blue;  color: #fff;
}

結構性偽類選擇器 root

:root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素E所在文件的根元素。在HTML文件中，根元素始終是

透過“:root”選擇器設定背景顏色

:root {  background:orange;
}

結構性偽類選擇器 not

:not選擇器稱為否定選擇器，和jQuery中的:not選擇器一模一樣，可以選擇除某個元素之外的所有元素。就拿form元素來說，比如說你想給表單中除submit按鈕之外的input元素新增紅色邊框

form {  width: 200px;  margin: 20px auto;
}div {  margin-bottom: 20px;
}input:not([type="submit"]){  border:1px solid red;
}

結構性偽類選擇器 empty

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格

比如說，你的文件中有三個段落p元素，你想把沒有任何內容的P元素隱藏起來。我們就可以使用:empty選擇器來控制

p{ background: orange; min-height: 30px;
}p:empty {  display: none;
}

結構性偽類選擇器 target

:target選擇器稱為目標選擇器，用來匹配文件(頁面)的url的某個標誌符的目標元素

點選連結顯示隱藏的段落

html程式碼：

    content for Brand

css程式碼：

.menuSection{  display: none;
}:target{  /*這裡的:target就是指id="brand"的div物件*/
  display:block;
}

分析：

1. 具體來說，觸發元素的URL中的標誌符通常會包含一個#號，後面帶有一個標誌符名稱，上面程式碼中是：#brand

2. :target就是用來匹配id為brand的元素（id="brand"的元素）,上面程式碼中是那個div元素。

多個url(多個target)的處理：

同一個頁面上有很多的url的時候你可以取不同的名字，只要#號後對的名稱與id=""中的名稱對應就可以了

html程式碼：

  content for Brand

  content for jake

   content for aron

CSS程式碼：

#brand:target {  background: orange;  color: #fff;
}#jake:target {  background: blue;  color: #fff;
}#aron:target {  background: red;  color: #fff;
}

結構性偽類選擇器 first-child

:first-child選擇器表示的是選擇父元素的第一個子元素的元素E

示例演示:

透過:first-child選擇器定位列表中的第一個列表項，並將序列號顏色變為紅色。

html程式碼：

CSS程式碼：

ol > li{  font-size:20px;  font-weight: bold;  margin-bottom: 10px;
}ol a {  font-size: 16px;  font-weight: normal;
}ol > li:first-child{  color: red;
}

結構性偽類選擇器 last-child

:last-child選擇器選擇的是元素的最後一個子元素

html程式碼：

 
第一段落
 
第二段落
 
第三段落
 
第四段落
 
第五段落

CSS程式碼：

.post {  padding: 10px;  border: 1px solid #ccc;  width: 200px;  margin: 20px auto;
}.post p {  margin:0 0 15px 0;
}.post p:last-child {  margin-bottom:0;
}

結構性偽類選擇器 nth-child(n)

:nth-child(n)選擇器用來定位某個父元素的一個或多個特定的子元素。其中n是其引數，而且可以是整數值(1,2,3,4)，也可以是表示式(2n+1、-n+5)和關鍵詞(odd、even)，但引數n的起始值始終是1，而不是0。也就是說，引數n的值為0時，選擇器將選擇不到任何匹配的元素。

html程式碼：

 
item1
 
item2
 
item3
 
item4
 
item5
 
item6
 
item7
 
item8
 
item9
 
item10

CSS程式碼：

ol > li:nth-child(2n){  //將偶數行列表背景色設定為橙色
  background: orange;
}

結構性偽類選擇器 nth-last-child(n)

:nth-last-child(n)選擇器和前面的:nth-child(n)選擇器非常的相似，只是這裡多了一個last，所起的作用和:nth-child(n)選擇器有所區別，從某父元素的最後一個子元素開始計算，來選擇特定的元素。

html程式碼：

 
item1
 
item2
 
item3
 
item4
 
item5
 
item6
 
item7
 
item8
 
item9
 
item10
 
item11
 
item12
 
item13
 
item14
 
item15

CSS程式碼：

ol > li:nth-last-child(5){  background: orange;
}

first-of-type選擇器

:first-of-type選擇器類似於:first-child選擇器，不同之處就是指定了元素的型別,其主要用來定位一個父元素下的某個型別的第一個子元素。

html程式碼：

 
我是一個塊元素，我是.wrapper的第一個子元素
 
我是一個段落元素，我是不是.wrapper的第一個子元素，但是他的第一個段落元素
 
我是一個段落元素
 
我是一個塊元素

CSS程式碼：

.wrapper {  width: 500px;  margin: 20px auto;  padding: 10px;  border: 1px solid #ccc;  color: #fff;
}.wrapper > div {  background: green;
}.wrapper > p {  background: blue;
}/*我要改變第一個段落的背景為橙色*/.wrapper > p:first-of-type {  background: orange;
}

nth-of-type(n)選擇器

:nth-of-type(n)選擇器和:nth-child(n)選擇器非常類似，不同的是它只計算父元素中指定的某種型別的子元素。當某個元素中的子元素不單單是同一種型別的子元素時，使用:nth-of-type(n)選擇器來定位於父元素中某種型別的子元素是非常方便和有用的。在:nth-of-type(n)選擇器中的n和:nth-child(n)選擇器中的n引數也一樣，可以是具體的整數，也可以是表示式，還可以是關鍵詞。

html程式碼：

 
我是一個Div元素
 
我是一個段落元素
 
我是一個Div元素
 
我是一個段落
 
我是一個Div元素
 
我是一個段落
 
我是一個Div元素
 
我是一個段落
 
我是一個Div元素
 
我是一個段落
 
我是一個Div元素
 
我是一個段落
 
我是一個Div元素
 
我是一個段落
 
我是一個Div元素
 
我是一個段落

CSS程式碼：

.wrapper > p:nth-of-type(2n){  background: orange;
}

last-of-type選擇器

:last-of-type選擇器和:first-of-type選擇器功能是一樣的，不同的是他選擇是父元素下的某個型別的最後一個子元素。

html程式碼：

 
我是第一個段落
 
我是第二個段落
 
我是第三個段落
 
我是第一個Div元素
 
我是第二個Div元素
 
我是第三個Div元素

CSS程式碼：

.wrapper > p:last-of-type{  background: orange;
}

nth-last-of-type(n)選擇器

:nth-last-of-type(n)選擇器和:nth-of-type(n)選擇器是一樣的，選擇父元素中指定的某種子元素型別，但它的起始方向是從最後一個子元素開始

html程式碼：

 
我是第一個段落
 
我是第二個段落
 
我是第三個段落
 
我是第四個段落
 
我是第五個段落
 
我是一個Div元素
 
我是第六個段落
 
我是第七個段落

CSS程式碼：

.wrapper > p:nth-last-of-type(3){  background: orange;
}

only-child選擇器

:only-child選擇器選擇的是父元素中只有一個子元素，而且只有唯一的一個子元素。也就是說，匹配的元素的父元素中僅有一個子元素，而且是一個唯一的子元素。

html程式碼：

  
我是一個段落
  
我是一個段落

  
我是一個段落

CSS程式碼：

.post p {  background: green;  color: #fff;  padding: 10px;
}.post p:only-child {  background: orange;
}

only-of-type選擇器

:only-of-type選擇器用來選擇一個元素是它的父元素的唯一一個相同型別的子元素。這樣說或許不太好理解，換一種說法。:only-of-type是表示一個元素他有很多個子元素，而其中只有一種型別的子元素是唯一的，使用:only-of-type選擇器就可以選中這個元素中的唯一一個型別子元素。

html程式碼：

 
我是一個段落
 
我是一個段落
 
我是一個段落
 
我是一個Div元素

 
我是一個Div
 

   
我是一個列表項
 
 
我是一個段落

CSS程式碼：

.wrapper > div:only-of-type {  background: orange;
}

:enabled選擇器

在Web的表單中，有些表單元素有可用:enabled和不可用:disabled狀態，比如輸入框，密碼框，核取方塊等。在預設情況之下，這些表單元素都處在可用狀態。那麼我們可以透過偽選擇器:enabled對這些表單元素設定樣式。

html程式碼：

 

   Text Input:      

  

   Text Input:      

CSS程式碼：

div{  margin: 20px;
}input[type="text"]:enabled {  background: #ccc;  border: 2px solid red;
}

:disabled選擇器

:disabled選擇器剛好與:enabled選擇器相反，用來選擇不可用表單元素。要正常使用:disabled選擇器，需要在表單元素的HTML中設定disabled屬性。

html程式碼：

 

     

 

     

CSS程式碼：

form {  margin: 50px;
}div {  margin-bottom: 20px;
}input {  background: #fff;  padding: 10px;  border: 1px solid orange;  border-radius: 3px;
}input[type="text"]:disabled {  background: rgba(0,0,0,.15);  border: 1px solid rgba(0,0,0,.15);  color: rgba(0,0,0,.15);
}

:checked選擇器

在表單元素中，單選按鈕和核取按鈕都具有選中和未選中狀態。（大家都知道，要覆寫這兩個按鈕預設樣式比較困難）。在CSS3中，我們可以透過狀態選擇器:checked配合其他標籤實現自定義樣式,而:checked表示的是選中狀態。

html程式碼：

 

   

     √    

   我是選中狀態  

   

   

     √    

   我是未選中狀態  

CSS程式碼：

form {  border: 1px solid #ccc;  padding: 20px;  width: 300px;  margin: 30px auto;
}.wrapper {  margin-bottom: 10px;
}.box {  display: inline-block;  width: 20px;  height: 20px;  margin-right: 10px;  position: relative;  border: 2px solid orange;  vertical-align: middle;
}.box input {  opacity: 0;  position: absolute;  top:0;  left:0;
}.box span {  position: absolute;  top: -10px;  right: 3px;  font-size: 30px;  font-weight: bold;  font-family: Arial;  -webkit-transform: rotate(30deg);  transform: rotate(30deg);  color: orange;
}input[type="checkbox"] + span {  opacity: 0;
}input[type="checkbox"]:checked + span {  opacity: 1;
}

::selection選擇器

::selection偽元素是用來匹配突出顯示的文字(用滑鼠選擇文字時的文字)

html程式碼：

“::selection”偽元素是用來匹配突出顯示的文字。瀏覽器預設情況下，選擇網站文字是深藍的背景，白色的字型，

CSS程式碼：

::-moz-selection {  background: red;  color: green;
}::selection {  background: red;  color: green;
}

:read-only選擇器

:read-only偽類選擇器用來指定處於只讀狀態元素的樣式。簡單點理解就是，元素中設定了readonly=’readonly’

html程式碼：

 

   姓名:      

 

   地址:      

CSS程式碼：

form {  width: 300px;  padding: 10px;  border: 1px solid #ccc;  margin: 50px auto;
}form > div {  margin-bottom: 10px;
}input[type="text"]{  border: 1px solid orange;  padding: 5px;  background: #fff;  border-radius: 5px;
}input[type="text"]:-moz-read-only{  border-color: #ccc;
}input[type="text"]:read-only{  border-color: #ccc;
}

:read-write選擇器

:read-write選擇器剛好與:read-only選擇器相反，主要用來指定當元素處於非只讀狀態時的樣式。

html程式碼：

 

   姓名:      

 

   地址:      

CSS程式碼：

form {  width: 300px;  padding: 10px;  border: 1px solid #ccc;  margin: 50px auto;
}form > div {  margin-bottom: 10px;
}input[type="text"]{  border: 1px solid orange;  padding: 5px;  background: #fff;  border-radius: 5px;
}input[type="text"]:-moz-read-only{  border-color: #ccc;
}input[type="text"]:read-only{  border-color: #ccc;
}input[type="text"]:-moz-read-write{  border-color: #f36;
}input[type="text"]:read-write{  border-color: #f36;
}

::before和::after

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常和content配合使用，使用的場景最多的就是清除浮動。

.clearfix::before,.clearfix::after {    content: ".";    display: block;    height: 0;    visibility: hidden;
}.clearfix:after {clear: both;}.clearfix {zoom: 1;}

當然，我們還可以使用它們來實現陰影效果

.effect::before, .effect::after{    content:"";    position:absolute;    z-index:-1;    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);    box-shadow:0 0 20px rgba(0,0,0,0.8);    top:50%;    bottom:0;    left:10px;    right:10px;    -moz-border-radius:100px / 10px;    border-radius:100px / 10px;
}

上面程式碼作用在class名叫.effect上的div的前（before）後(after)都新增一個空元素，然後為這兩個空元素新增陰影特效。

作者：阿振_sc
連結：