结构伪类选择器

伪类：条件

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用class，id选择器-->
  <style>
  /*ul的第一个子元素*/
    ul li:first-child{
    background: #34ee0b;
  }
  /*ul的最后一个子元素*/
  ul li:last-child{
    background: red;
  }
  /*选中p1 定位到父元素，选择当前的第一个元素
  选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！*/
  p:nth-child(2){
    background: blue;
  }
  /*选中父元素，下的P元素的第二个，类型*/
  p:nth-of-type(2){
    background: #ffd500;
  }
  a:hover{
    background: black;
  }
  </style>
</head>
<body>
<a href="">123456</a>
<h1>h1</h1>
<p>po</p>
<p>p1
  <a href="">456</a>
</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    li1
  </li>
  <li>
    li2
  </li>
  <li>
    li3
  </li>
</ul>
</body>
</html>

 

posted @ 2023-04-07 10:48  爱的加勒比  阅读(14)  评论(0)    收藏  举报