用于具有特定类和父级的元素的 CSS 选择器

Question

如果一个元素具有特定的类和父元素，我想对其进行样式设置。如果我使用caption > h1它，它可以完美工作，但是一旦我添加我的课程，.sub它就不再工作了。

HTML：

<caption>
    <h1 class="sub">Text</h1>
</caption>   

CSS：

作品：

caption > h1 {
    font-weight: 500;
    color: #777;
    font-family: sans-serif;
}

不起作用：

.sub caption > h1 {
    font-weight: 500;
    color: #777;
    font-family: sans-serif;
}

如何使用特定的parentand选择元素class？

Answer 1

选择>器指示直接父代。上面的代码.sub caption > h1尝试选择h1作为caption元素的直接子元素的任何元素，其中该<caption>元素是具有 class 的元素的子元素.sub。它不起作用，因为您没有类的父项。<caption>sub

您可以通过编写紧跟在类选择器后面的元素选择器（不带空格）来指定目标元素必须包含特定类。例如，定位具有 类 的任何元素。它不会定位不具有该类的元素，也不会定位不是元素但具有该类的元素。h1.sub<h1>sub<h1>.sub <h1>.sub

同样重要的是要注意，它<caption>仅作为 的直接子级有效<table>。

本质上，您正在寻找的是以下内容：

caption > h1.sub {
  color: red;
}

<table>
  <caption>
    <h1 class="sub">Text</h1>
  </caption>
</table>

<h1>它的目标是具有 的类的.sub直接子元素的任何元素<caption>。

希望这可以帮助！:)