CSS子元素选择器写法和符号

CSS子元素选择器

CSS子元素选择器是CSS中组合选择器，或者称为复合选择器中的一种。而什么是子元素呢？比如<div><p><span></span></p></div>中，元素p是div的子元素，span是p的子元素，然后span是div的子元素的子元素。CSS子元素选择器便是通过HTML元素之间的关系来选择获取该元素。

子元素选择器写法和符号

A > B{ 样式声明 }

提示：“>”为子元素选择器符号。其中，A可以是HTML的元素，也可以是HTML元素的类和id。

子元素选择器实例代码，及在线编辑器

<div id='e2' class='d2'><span>这是div的子元素span</span><p>这是段落p<span>这是p的子元素span，是div的子元素的子元素</span></p></div>

<style>
  div > span{color:skyblue;}
  /* .d2 > span{color:blue;} */
  /* #e2 > p > span{color:orange;} */
</style>

实例代码提示

可以将上面代码中的CSS的注释符号“/* */”删除，再运行看看效果，其中#e2选择的是子元素的子元素。

hot：热门