ASCII码 ASCII码

CSS: 伪类和参数-复习

发布于：2022-05-10 11:31:42  栏目：技术文档

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择器：伪类</title> </head> <body> <!-- 伪类： 1.结构伪类：根据元素位置获取元素 2.状态伪类：根据状态来获取元素 -->

  1.     <ul class="list">
  2.         <li class="first">item1</li>
  3.         <li>item2</li>
  4.         <li>item3</li>
  5.         <li>item4</li>
  6.         <li>item5</li>
  7.         <li>item6</li>
  8.         <li>item7</li>
  9.         <li>item8</li>
  10.         <p>aaaa</p>
  11.         <p>bbbb</p>
  12.         <p>cccc</p>
  13.     </ul>
  15.     <style>
  16.         /* .list >:first-child{
  17.             background-color: red;
  18.         } */
  20.         /* .list >p:first-of-type{
  21.             background-color: yellow;
  22.         }
  24.         .list .first{
  25.             background-color: lightgreen;
  26.         } */
  29.         /* .list >li:nth-of-type(3){
  30.             background-color: lightblue;
  31.         } */
  33.         /* .list >li:nth-last-of-type(3){
  34.             background-color: lightblue;
  35.         } */
  38.         .list >p:nth-of-type(2){
  39.             background-color: lightblue;
  40.         }
  42.         .list :first-of-type{
  43.             background-color: lightblue;
  44.         }
  48.     </style>
  51. </body>
  52. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行