具有特定类和父元素的元素的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;
}

如何选择具有特定parent和class？

的元素

Answer 1

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

您可以通过编写元素选择器立即，然后选择类选择器（不带空格）来指定目标元素必须包含特定类。例如，h1.sub定位具有类<h1>的任何sub元素。 赢得目标<h1>元素，不拥有.sub类，也 不 <h1>元素但执行的元素具有.sub类。

注意<caption>为only valid as a direct child of <table>也很重要。

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

＆＃13;

＆＃13;

caption > h1.sub {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这会定位任何<h1>元素，其.sub类是<caption>的直接子元素。

希望这有帮助！ ：）