子代选择器和后代选择器

落日映苍穹つ 2022-05-18 09:43 372阅读 0赞

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

子标签：必须是当前的标签的下一级 必须事儿子。

  1. <ul>
  2.     <li>
  3.         <a href="#">一级菜单</a>
  4.         <div>
  5.             <a href="#">二级菜单</a>
  6.             <a href="#">二级菜单</a>
  7.             <a href="#">二级菜单</a>
  8.         </div>
  9.     </li>
  11. </ul>

例如上面的 li这个标签的字标签就是 a标签和div标签，那有人就有疑问了，那 li的字标签 div设置样式的时候里面的a标签会不会变化呢，答案是 a 标签是不会变化的。
在样式里面可以这样写

  1. ul li > a { /*子代选择器 子 指的是 亲儿子 大于号分割 此时的a 一定是 li 的亲 儿子 */ color: red; }

后代标签

  1. ul a  { /*后代选择器 所有的后代的意思 最多*/ color: red; }

后代标签只要是当前标签里面的任意一个标签都行不一定非要亲儿子

发表评论

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

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

相关阅读