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元素的指定規則元素，好比 一、二、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元素的指定規則）

以上的屬性選擇器和結構僞類選擇器都是操做元素自己，那接下來這個選擇器就很神奇，它會添加一個新的不存在的元素，並操做，一塊兒來看看僞元素選擇器。

僞元素選擇器有兩個，::before，在元素的前面添加一個行內元素，::after，在元素的後面添加一個行內元素，須要添加兩個冒號，爲了兼容，也能夠只寫成一個冒號

設置僞元素，必須的屬性是 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的結構，更加靈活的獲取須要的元素