[分享]css取出父标签中的子标签

CSS 取出父标签中的子标签，可以使用选择器中的 > 符号。父标签 > 子标签 { 属性: 值; } 例如，下面的 HTML 结构中，想要修改第一项中的子标签的样式，可以使用以下代码： ...

CSS 取出父标签中的子标签，可以使用选择器中的 > 符号。

父标签 > 子标签 {
  属性: 值;
} 

例如，下面的 HTML 结构中，想要修改第一项中的子标签的样式，可以使用以下代码：

<ul>
  <li>
    <h2>标题一</h2>
    <p>段落一</p>
    <img src="image1.jpg" alt="图片一">
  </li>
  <li>
    <h2>标题二</h2>
    <p>段落二</p>
    <img src="image2.jpg" alt="图片二">
  </li>
</ul>

ul > li:first-child p {
  color: red;
} 

代码中的 > 符号表示选择当前父标签下的子标签。

例如，上面的代码中，选择了 ul 标签下的第一个 li 标签，再选择该 li 标签中的第一个 p 标签，将其字体颜色修改为红色。

通过上述方法，可以轻松实现 CSS 取出父标签中的子标签的操作。