:last-child與:last-of-type你只是會用，有研究過區別嗎？

時間 2019-11-30

標籤 child type 只是會用研究區別简体版

原文原文鏈接

:last-child與:last-of-type

同窗們遇到過給同一組元素的最後一個元素設置css失效的狀況嗎？我遇到過，當時使用:last-child竟然不起做用，看到名字不科學啊，明明是「最後一個元素」，那爲何設置CSS失效呢？今天來一探究竟吧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>

再先看一組: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>

問題拋出來了，那麼來研究下:last-child和:last-of-type到底是何方神聖。html

:last-child：The last-child CSS pseudo-class represents the last element among a group of sibling elements.（:last-child這個css僞類表明的一組兄弟元素當中最後一個元素）但通過代碼發現，它說的一組元素應該是指其父元素的全部子元素且類型爲:last-child前面指定的類型的一組元素。jquery
: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前面的元素類型一致的一組元素的最後一個元素code

同理：:nth-last-child和:nth-last-of-type的區別在於父元素的子元素中且與:nth-last-child前面的元素類型一致的最後一個元素htm

作個驗證ip

: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>

: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>

接下來: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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。