Question

我有一篇文章包含一个图库，但我不希望文章的h2标签的样式影响图库中的h2＆＃39。我尝试过使用：not（）伪类，但似乎我不能用它来解决这个问题。

我想知道是否可以在不重写文章h2样式的情况下使用它。（在这种情况下它是h2，但实际上它涉及很多标签和很多css）。

示例

HTML：

<h2>This is a default h2</h2>
<div class="article">
  <h2>This should use article h2 styling</h2>
  <p>Paragraph 1</p>
  <div class="gallery">
    <h2>This should use default styling</h2>
    <p>Paragraph 2</p>
  </div>
  <p>Paragraph 3</p>
</div>

CSS：

h2 {
  font-size: 30px;
  color: green;
}
.article h2 {
  font-size: 20px;
  color: blue;
}
.gallery {
  border: 1px solid #000;
  padding: 10px;
}

工作示例：https://jsfiddle.net/sorenhusted/b774p8be/3/

Answer 1

您需要直接子选择器mysql_。

每MDN

>组合子分隔两个选择器，仅匹配第二个选择器匹配的元素，这些元素是第一个匹配的元素的直接子元素。相反，当两个选择器与后代选择器组合时，组合选择器表达式匹配由第二选择器匹配的元素，其中存在与第一选择器匹配的祖先元素，而不管＆＃34;跳数＆＃34的数量; DOM。

JSFiddle Demo

Answer 2

尝试：

.article>h2 {
  font-size: 20px;
  color: blue;
}

示例：https://jsfiddle.net/b774p8be/4/

Answer 3

直接儿童访问者（>）是您的朋友！

在您的CSS中，只需将.article h2替换为.article > h2，然后就可以了： - ）

基本上，它表示“只有h2元素是<{1}}元素的直接子元素才会受到影响。

https://jsfiddle.net/b774p8be/6/

Answer 4

您可以将.article .gallery h2分配给用于默认h2的相同样式：

h2, .article .gallery h2 {
 font-size: 30px;
 color: green;
}

如何定位除某个容器内的h2标签以外的所有h2标签

4 个答案: