CSS E:nth-last-of-type(n)

admin發表於2019-01-11
CSSAST

當前，CSS算不上真正的程式語言，所以相對於真正的程式語言要簡單很多。

尤其CSS選擇器更是簡單，無非是按照簡單的規則匹配對應的元素。

如果勉強說哪幾個選擇器稍微有點難度，標題中的E:nth-last-of-type(n)算是一個，但與真正的程式語言橫向比較起來是非常簡單的，所以帶著一顆輕鬆加愉快的心情學習此選擇器可能效果會更好一些。

它是偽類選擇器，可以匹配父元素下滿足如下條件的子元素：

（1）.首先，元素為E型別，E是選擇器。

（2）.其次，處於同標籤型別（type）兄弟元素的倒數第n個。

特別說明：引數n並不僅僅是簡單的數字，也可以是關鍵字或者表示式，後面會有詳細的程式碼介紹。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:nth-last-of-type(n){ 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:nth-last-of-type(1){
  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/201901/11/151742f3ih6wi23swh6s5s.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

選擇器可以匹配li元素集合中的倒數第一個li，並將其字型顏色設定為藍色。

首先分析一下選擇器li:nth-last-of-type(1)的構成：

（1）.首先，被匹配元素必須能夠被li元素選擇器所匹配。

（2）.其次，被匹配元素必須是同標籤型別。

（3）.最後，被匹配元素必須位於通標籤型別元素集合的倒數第一位。

（3）.於是，最後一個li元素滿足上述條件。

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151810fhem43mppfl8f9xh.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼沒有匹配任何的li元素，程式碼分析如下：

（1）.首先，被匹配元素必須被".ant"選擇器所匹配。

（2）.其次，被匹配元素，必須是同標籤型別集合中的最後一個。

好多朋友可能會誤認為第三個li元素字型應該為被設定為藍色，其實並不會，它只滿足第一個條件（被.ant選擇器所匹配），但是它並不是li元素集合的倒數第一個，很明顯它是倒數第二個。

[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}
.ant:nth-last-of-type(1){
  color:blue;
}
</style>
</head>
<body>
  <ul>
    <li class="ant">螞蟻部落一</li>
    <span class="ant">螞蟻部落二</span>
    <li class="ant">螞蟻部落三</li>
    <span class="ant">螞蟻部落四</span>
    <li>螞蟻部落五</li>
    <li class="ant">螞蟻部落六</li>
  </ul>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151834wrxbtb0bbrj2uqk8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面這個程式碼更能展現此選擇器的匹配原理，程式碼分析如下：

（1）.首先，被匹配元素被選擇器".ant"所匹配，具有此class屬性值的span或者li被匹配。

（2）.其次，被匹配元素必須位於同型別標籤元素集合中的最後一位，那麼第二個span位於span元素集合的最後一個，匹配成功，最後一個li元素自然位於li元素集合的最後一位，匹配成功。

前面幾個程式碼例項，選擇器的引數都是數字，其實引數也可以是關鍵字或者表示式，這也是此選擇器功能強大的原因之一，先介紹引數是關鍵字的情況，程式碼例項如下：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151901mvc89ivooglgwgg6.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

此選擇器具有兩個關鍵字，odd（奇數）與even（偶數）。

上述程式碼可以匹配奇數行li元素，將其字型顏色設定為藍色。

好多朋友會有這樣的疑問，上面明明匹配的是偶數行li元素，不要忘記是倒數奇數行。

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

[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}
li:nth-last-of-type(odd){
  color:blue;
}
</style>
</head>
<body>
<body>
  <ul>
    <li>螞蟻部落一</li>
    <span>螞蟻部落二</span>
    <li>螞蟻部落三</li>
    <span>螞蟻部落四</span>
    <li>螞蟻部落五</li>
    <span>螞蟻部落六</span>
 </ul>
</body>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/151930mcp5yqhcva59qiki.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

看到上面的執行效果，好像與前面的結論相反，其實並不然，一切都是符合原理的。

一定要記住是同標籤型別元素集合中的奇數行，"螞蟻部落五"和"螞蟻部落一"所在的li元素都是li元素集合的奇數行。

上面演示了引數是關鍵字的使用，下面再介紹一下更為強大的表示式作為引數的應用，程式碼例項如下：

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201901/11/152004f1ixqssqp255ti98.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼中，選擇器的引數是一個表示式，首先對錶達式語法進行一下解析：

[CSS] 純文字檢視 複製程式碼
E:nth-last-of-type(an+b)

解析如下：

（1）.a表示每次計數跨越兄弟元素的基礎個數。

（2）.n表示跨越的次數，從開始計數進行自增。

（3）.b表示跨域的偏移量。

對程式碼中選擇器li:nth-last-of-type(2n + 1)的匹配分析如下：

規定每次跨越兄弟元素基礎個數是2，偏移量為1：

（1）.2*0+1=1

（2）.2*1+1=3

（3）.2*2+1=5

（4）.按照上面的規則繼續推算。

又由於此選擇器是倒數計數的，所以倒數第一個，倒數第三個和倒數第五個等li匹配成功。

相關文章