CSS E:last-child

admin發表於2018-11-12
CSSAST

E:last-child是偽類選擇器，匹配父元素下處於最後一位，且型別為E的子元素。

被匹配的元素具有如下幾個特點：

（1）.首先，被匹配元素是E型別。

（2）.其次，必須是父元素的最後一個子元素。

特別說明：E並不僅表示元素選擇器，也可以是其他CSS選擇器。

功能與E:last-of-type非常類似，區別就在於對於元素型別的限制。

具體內容參閱如下兩篇文章：

（1）.CSS E:last-of-type選擇器一章節。

（2）.E:last-of-type與E:last-child區別一章節。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:last-child{ Rules}

引數解析：

（1）.E：CSS選擇器。

（2）.Rules：CSS具體規則宣告。

瀏覽器支援:

（1）.IE9+瀏覽器支援此選擇器。

（2）.edge瀏覽器支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
li:last-child{
  color:blue;
}
</style>
</head>
<body>
<ul>
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111757yzoc42wz1wrow272.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼可以將ul下最後一個li元素字型顏色設定為藍色。

被匹配元素需要滿足如下幾個條件：

（1）.首先，必須是li元素。

（2）.其次，li元素必須是ul的最後一個子元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.a:last-child{
  color:blue;
}
</style>
</head>
<body>
<ul>
  <li class="a">螞蟻部落一</li>
  <li class="a">螞蟻部落二</li>
  <li class="a">螞蟻部落三</li>
  <li>螞蟻部落四</li>
</ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111831zlbqzuvurlszvs8r.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面選擇器匹配失敗，程式碼分析如下：

（1）.class選擇器"a"匹配ul中的前三個li元素。

（2）.但是，"a"所匹配的li元素中，都不是ul的最後一個子元素，所以匹配失敗。

再來看一段程式碼例項加深理解，程式碼是如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
span{display:block}
span:last-child{
  color:blue;
}
</style>
</head>
<body>
  <div id="box">
    <span>螞蟻部落一</span>
    <span>螞蟻部落二</span>
    <div id="ant">
      <span>螞蟻部落三</span>
      <div id="inner">
        <span>螞蟻部落四</span>
      </div>
    </div>
  </div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111908rbcfbzj9c8cc750g.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第四個span元素匹配成功，程式碼分析如下：

（1）.box具有三個子元素，兩個span與ant，span元素不是box的最後一個子元素，失敗。

（2）.ant具有兩個子元素，一個span與ant，span同樣不是ant的最後一個子元素，失敗。

（3）.inner具有一個子元素span，當然此span也是inner的最後一個子元素，成功。

下面是佈局中常見的一個案例，程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  list-style: none;
  width:400px;
  margin: 0;
  padding: 20px;
  margin: 4rem auto;
  background: #ccc;
}
.box li:not(:last-child){
  border-bottom: 1px solid #000;
  margin-bottom: .5rem;
  padding-bottom: .5rem;
}
</style>
</head>
<body>
  <ul class="box">
    <li>本站的url地址是www.softwhy.com</li>
    <li>珍惜今天的所有，因為此刻是你真正擁有</li>
    <li>努力奮鬥會使生活變的有意義</li>
    <li>任何編碼高手主要是後面努力的結果</li>
  </ul>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/12/111941h6mmud2dywps0z16.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

文章列表通常需要用虛線或者實現對其進行分割，以提高辨識度。

但是最後一行並不需要分割線，否則會有一些醜陋。

那麼可以通過利用li:not(:last-child)選擇器可以將最後一行過濾掉。

相關文章