结构伪类选择器-2022-12-23 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*结构伪类选择器，不需要特别记住 */
    /*ul的第一个子元素 */
    ul li:first-child{
      background: #61e93e;
    }
    /*ul的最后一个子元素 */
    ul li:last-child{
      background: darkviolet;
    }
    /*选中P1 选择当前p元素的父级元素，选中父级元素的第一个元素，并且式当前元素才生效 按顺序 */
    p:nth-child(1){
      background: red;
    }
    /*选中父元素下的p元素的第二个 类型*/
    p:nth-of-type(2){
      background: lightyellow;
    }

  </style>

</head>
<body>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

</body>
</html>
posted @ 2022-12-23 12:46  Rui2022  阅读(18)  评论(0)  编辑  收藏  举报