CSS-子元素选择器

朱雀 2023-07-01 06:25 204阅读 0赞

说明：

1.子元素选择器，只能选择作为某元素的子元素。
2.子选择器使用：大于号”>”,进行分割 

  1. <html>
  2. <head>
  3.     <style>
  4.     .div1 .div1-1 .div1-1-p{
  5.         color: red;
  6.     }
  8.     .div2 .div2-1 > .div2-1-p{
  9.         color: blue;
  10.     }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="div1">
  15.         <div class="div1-1">
  16.             <p class="div1-1-p">包含选择器,div1-1-p是div1-1的子级,    可以渲染</p>
  17.             <div>
  18.                 <p class="div1-1-p">包含选择器,div1-1-p不是div1-1的子级    可以渲染</p>
  19.             </div>
  20.         </div>
  21.     </div>
  23.     <div class="div2">
  24.         <div class="div2-1">
  25.             <p class="div2-1-p">包含选择器2, div1-1-p是div1-1的子级    可以渲染</p>
  26.             <div>
  27.                 <p class="div1-1-p">包含选择器,div1-1-p不是div1-1的子级    不不不可以渲染</p>
  28.             </div>
  29.         </div>
  30.     </div>
  31. </body>
  32. </html>

在这里插入图片描述

发表评论

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

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

相关阅读