:last-child與:last-of-type你只是會用,有研究過區別嗎?
:last-child與:last-of-type
同學們遇到過給同一組元素的最後一個元素設定css失效的情況嗎?我遇到過,當時使用:last-child居然不起作用,看到名字不科學啊,明明是“最後一個元素”,那為什麼設定CSS失效呢?今天來一探究竟吧
- 先看一組
:last-child
正常工作的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child、:last-of-type</title>
<script src="../../lib/jquery-2.1.0.js"></script>
<style>
ul {
margin: 100px 0;
}
li {
list-style: circle;
border-bottom: 1px solid #000000;
}
li:last-child {
border-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!--<p>我是來騷擾的</p>-->
</ul>
</body>
</html>
效果圖1
- 再先看一組
:last-child
不正常工作的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child、:last-of-type</title>
<script src="../../lib/jquery-2.1.0.js"></script>
<style>
ul {
margin: 100px 0;
}
li {
list-style: circle;
border-bottom: 1px solid #000000;
}
li:last-child {
border-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<p>我是來騷擾的</p>
</ul>
</body>
</html>
效果圖2
問題丟擲來了,那麼來研究下:last-child和:last-of-type究竟是何方神聖。
:last-child:The last-child CSS pseudo-class represents the last element among a group of sibling elements.(:last-child這個css偽類代表的一組兄弟元素當中最後一個元素)但經過程式碼發現,它說的一組元素應該是指其父元素的所有子元素且型別為:last-child前面指定的型別的一組元素。
:last-of-type:The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.(:last-of-type這個css偽類代表其型別的一組兄弟元素中的最後一個元素)所以它指的是和:last-of-type前面的元素型別一致的一組元素的最後一個元素
同理::nth-last-child和:nth-last-of-type的區別在於父元素的子元素中且與:nth-last-child前面的元素型別一致的最後一個元素
做個驗證
- :nth-last-child可以正常工作的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child、:last-of-type</title>
<script src="../../lib/jquery-2.1.0.js"></script>
<style>
ul {
margin: 100px 0;
}
li {
list-style: circle;
border-bottom: 1px solid #000000;
}
li:nth-last-child(1){
border-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!--<p>我是來騷擾的</p>-->
</ul>
</body>
</html>
效果圖3
- :nth-last-child不能正常工作的程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child、:last-of-type</title>
<script src="../../lib/jquery-2.1.0.js"></script>
<style>
ul {
margin: 100px 0;
}
li {
list-style: circle;
border-bottom: 1px solid #000000;
}
li:nth-last-child(1){
border-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<p>我是來騷擾的</p>
</ul>
</body>
</html>
效果圖2
- 接下來:nth-last-of-type閃亮登場
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:last-child、:last-of-type</title>
<script src="../../lib/jquery-2.1.0.js"></script>
<style>
ul {
margin: 100px 0;
}
li {
list-style: circle;
border-bottom: 1px solid #000000;
}
li:nth-last-of-type(1){
border-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<p>我是來騷擾的</p>
</ul>
</body>
</html>
效果圖3
相關文章
- E:last-child與E:last-of-type區別AST
- ApplicationStartedEvent與ContextStartedEvent有區別嗎?APPdevContext
- 你有使用過BackboneJS嗎?說說它和vue有什麼區別?JSVue
- 「Adobe國際認證」字型與字型有區別嗎?字型區別的真正“奧義”秘籍,你掌握了嗎!
- Python中is和==的區別有多大,你知道嗎?Python
- js substr 與 substring 有什麼區別嗎JS
- 你有玩過Docker嗎?你知道它有哪些運用場景嗎?Docker
- 一體成型電感與功率電感有什麼區別你知道嗎
- 你有被FBI警告過嗎?
- 你真的瞭解HTTP中GET與POST的區別嗎?HTTP
- 你知道什麼是PAJAX嗎?它和AJAX有什麼區別?它的應用場景有哪些?
- 你真的知道 == 和 equals 的區別嗎?
- 你知道void和Void的區別嗎
- hashCode和identityHashCode的區別你知道嗎?IDE
- 你真的懂 == 和 equals 的區別嗎?
- shell與Linux命令有什麼區別?它們之間有聯絡嗎?Linux
- JMS和AMQP有什麼區別嗎MQ
- SQLSERVER 的 truncate 和 delete 有區別嗎?SQLServerdelete
- 軟體測試這些誤區你有過嗎?快收藏避雷了!
- 你有用過圖片熱區嗎?它有什麼運用場景?
- 你有自己做過外包嗎?你對外包有什麼看法?
- 小編帶你學定界符之nowdoc和heredoc有區別嗎?
- 過濾器和攔截器有啥區別,這次會了!過濾器
- 前端er,你真的會用 async 嗎?前端
- Http 請求 header 大小寫有區別嗎?HTTPHeader
- 用HTML5實現手機搖一搖功能你有做過嗎?你知道它的原理嗎?HTML
- 對於網站的風格,你能說說在國內與國外的區別有哪些嗎?網站
- 你有使用過MediaRecorder嗎?說說它的運用場景有哪些?
- 你用的32位還是64位?有什麼區別呢?
- Memcached與Redis有什麼區別Redis
- innerHTML與outerHTML有什麼區別?HTML
- AppSec與DevSecOps有什麼區別?APPdev
- BFC與IFC有什麼區別?
- 堡壘機是伺服器嗎?兩者有區別嗎?伺服器
- 你瞭解個人雲盤和企業雲盤有什麼區別嗎?
- 如果EXCEL有段位,你會是什麼水平?網友:我竟然只是青銅Excel
- Linux系統好用嗎?跟Windows有何區別?LinuxWindows
- jquery中$.get()提交和$.post()提交有區別嗎?jQuery
- http與https的區別我真的知道嗎HTTP