CSS3新增了哪些選擇器？（屬性、結構偽類、偽元素選擇器）

在css3提供的新選擇器之前，選擇一個元素需要借助id或者class，css3新增的選擇器可以更靈活的去選擇需要的元素，那css3提供了哪些好用的選擇器呢？

首先就是屬性選擇器，我們可以通過屬性選擇器在同樣的標簽/類中選擇出具有相同屬性的元素，不用額外再添加class或者id比如需要選擇出input標簽中具有value屬性的內容，就可以按以下方式

// css
input[value]{
   color: #333;
}

// html
<input type="text" value="請輸入用戶名">
<input type="text">

屬性選擇器還有以下匹配規則（E表示選擇器，att表示屬性值，val表示匹配的內容）

選擇符	簡介
E[att]	具有att屬性的E元素
E[att=val]	具有att屬性且值為val的E元素
E[att^=val]	具有att屬性且值以val開頭的E元素
E[att$=val]	具有att屬性且值以val結尾的E元素
E[att*=val]	具有att屬性且值包含val的E元素

選擇出input標簽中type為password的元素

// css
input[type=password]{
   color: #000
}
// html
<input type="text">
<input type="password">

選擇出div標簽中class以movie開頭的元素

// css
div[class^=movie]{
    color: brown
}

// html
<div class="movie-sky">天空之城</div>
<div class="movie-cat">龍貓</div>
<div class="movie-windy">起風了</div>
<div class="tv">武林外傳</div>

​

按照以上五種屬性選擇規則，可以自由的選擇具有某些特征的元素，那么如果此時我需要選擇的元素沒有單獨的屬性呢。

比如我想要在一串列表中選擇出奇數項和偶數項元素，分別設置不同的背景顏色，此時就需要結構偽類選擇器登場了。

結構偽類選擇器可以按下標選出指定項，比如第一項 :first-child，最后一項 :last-child，奇數項 :nth-child(even)，偶數項 :nth-child(odd)，第任何一項 :nth-child(n)

 

拿上述選擇器做一個演示

// html
<ul>
  <li>千與千尋的神隱</li>
  <li>起風了</li>
  <li>龍貓</li>
  <li>天空之城</li>
  <li>魔女宅急便</li>
</ul>

// css
ul :first-child {
  color: brown // 選擇ul的第一個子元素設置字體顏色為棕色
}

ul :last-child {
   text-decoration: underline; // 選擇ul的最后一個子元素設置下划線
}

ul :nth-child(even){
   font-weight: bold;         // 選擇ul的偶數子元素 設置字體加粗(下標從1開始)
}

​

可以看到，以上每一個偽類選擇器與前一個選擇器並沒有直接連在一起，都有一個空格，那連在一起表示什么意思呢？拿  :first-child來舉例，:last-child和 :nth-child都是類似的原理

ul :first-child  表示選擇ul里的第一個子元素 
ul:first-child   表示選擇第一個ul元素

以下為 ul:first-child

如果我們需要對子元素的選擇器屬性進行校驗，希望選擇ul里的第一個子元素，並且是li，那么就可以這樣定義

ul li:first-child

​

但是如果第一個元素與選定的元素不匹配，那么設置的樣式就不會生效

// css
div p:first-child {
   color: brown  // 先找到div的第一個子元素，發現它並不是p元素，所以樣式不生效
}

// html
<div>
   <div>div----千與千尋的神隱</div>
    <p>p----起風了</p>
    <p>p----龍貓</span>
    <h6>h6----天空之城</h6>
    <div>div----魔女宅急便</div>
</div>

​

那如果，我們想要選擇div下面的第一個p元素呢？此時就可以使用 :first-of-type

// 表示選擇div下p元素的第一個子元素
div p:first-of-type {
   color: brown
}

那如果沒有限定指定的子元素類型，所有的不同類型的子元素都會被設置樣式

// css
div :first-of-type {
   color: brown
}

​

與 :first-of-type 類似的還有以下兩種選擇器，分別是  :last-of-type（選擇某種類型的最后一個子元素），:nth-of-type（按指定規則選擇元素）

// css
div :first-of-type {
   color: brown
}

div :last-of-type {
   text-indent: 10px;
}

div :nth-of-type(2n+1) {
   text-decoration: underline;
}

​

來一個表格總結以下以上六種結構偽類選擇器

選擇符	簡介	備注
E :first-child	選擇E元素的第一個子元素	E A:first-child（選擇E元素的第一個子元素，且該子元素是A類型元素）
E :last-child	選擇E元素的最后第一個子元素	E A:last-child（選擇E元素的最后第一個子元素，且該子元素是A類型元素）
E :nth-child(n)	選擇E元素的指定規則元素，比如 1、2、3這樣的數字， even（偶數）、odd（基數）這樣的關鍵字，n或者2n+1這樣的表達式	E A:nth-child(n)（選擇E元素中符合指定規則的子元素， 且該子元素是A類型的元素）
E :first-of-type	選擇E元素中不同類型的子元素中的第一個	E A:first-of-type（選擇E元素中子元素為A，A元素中的第一個）
E :last-of-type	選擇E元素中不同類型的子元素中的最后一個	E A:last-of-type（選擇E元素中子元素為A，A元素中的最后一個）
E :nth-of-type(n)	選擇E元素的不同類型的指定規則	E A:nth-of-type（選擇E元素中子元素為A，A元素的指定規則）

以上的屬性選擇器和結構偽類選擇器都是操作元素本身，那接下來這個選擇器就很神奇，它會添加一個新的不存在的元素，並操作，一起來看看偽元素選擇器。

​

設置偽元素，必須的屬性是 content，其它的屬性可以根據自己的需要設置，它常見的有以下幾種用途，添加一個小圖標，比如圓點，箭頭

​

實現代碼如下

// css
div {
   position: relative;
}

div::after {
   position: absolute;
   top: 7px;
   left: 70px;
   content: '';
   display: block;
   width: 7px;
   height: 7px;
   border-right: 1px solid #333;
   border-top: 1px solid #333;
   transform: rotate(45deg)
}

// html
<div>查看更多</div>

或者設置鼠標滑動后添加一個遮罩層，效果顯示

實現代碼如下

// css
div{
   position: relative;
   width: 200px;
   height: 200px;
   margin-right: 60px;
}

img {
   width: 100%;
   height: 100%;
}

div::after {
   display: none;
   position: absolute;
   top: 0;
   left: 0;
   content: '';
   width: 100%;
   height: 100%;
   background: url(./src/broadcast.png) rgba(0,0,0,.5) center center no-repeat
}

div:hover::after{
   display: block;
}

// html
<div>
   <img src="./src/pig.jpg">
</div>

css3增加的以上選擇器可以減少html的結構，更加靈活的獲取需要的元素