复合选择器-后代选择器（HTML、CSS）

左手的ㄟ右手 2023-10-03 12:49 152阅读 0赞

复合选择器-后代选择器（HTML、CSS）

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>复合选择器-后代选择器</title>
  8.     <style>
  9.         /*    把ol里边的 li选出来 改为red */
  10.         ol li {
  12.             color: red;
  13.         }
  15.         /*  一级一级遍历 （从大到小） */
  16.         ol li a {
  18.             color: green;
  19.         }
  21.         .nav li a {
  23.             color: yellow;
  24.         }
  25.     </style>
  26. </head>
  28. <body>
  29.     <ol>
  30.         <!--   有序标签 -->
  31.         <!-- 父元素 -->
  32.         <li>111</li> <!-- 子元素 -->
  33.         <li>222</li>
  34.         <li>333</li>
  35.         <li><a href="#">123</a></li>
  36.     </ol>
  38.     <ul class="nav">
  39.         <!-- 无序标签 -->
  40.         <li>444</li>
  41.         <li>555</li>
  42.         <li>666</li>
  43.         <li><a href="#">456</a></li>
  44.         <li><a href="#">456</a></li>
  45.         <li><a href="#">456</a></li>
  46.     </ul>
  48. </body>
  50. </html>

发表评论

表情：
评论列表 （有 0 条评论，152人围观）

还没有评论，来说两句吧...

相关阅读

    相关 子代选择器和后代选择器

    在CSS3中，我们会遇到这个一个问题，当层级过多的时候，我们想对其中的某些标签进行操作，有时候我们又想只对某一层级的标签进行操作，这个时候就涉及到字标签和后代标签的问题

    落日映苍穹つ落日映苍穹つ/ 0 赞/ 373 阅读

    相关 CSS复合选择器

    复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成，其中第一个为标签选

    柔情只为你懂柔情只为你懂/ 0 赞/ 308 阅读

    相关 CSS复合选择器

    CSS复合选择器 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。 交集选择器 交集选择器由两个选择器构成，其

    Bertha 。Bertha 。/ 0 赞/ 312 阅读