Question

我认为这是一个非常愚蠢的问题。但我真的找不到答案。

我需要为我的所有h2标签提供border-top元素，但我的<header>中的h2标签除外。

现在它给了它一个很大的界限，它正在我的标题中。

我真的不知道如何解决这个问题似乎很容易。

body {
    background-color: AntiqueWhite;
    max-width: 800px;
    font-family: "Arial", Helvetica, sans-serif;
    color: black;

}

h2, h3 {
    font-style: italic;
    color: darkblue;
}

h3 {
    border-top:1px solid #999; padding-top:10px;
}

header {
    background-image: url(pics/bg.jpg);
    height: 140px;
    background-position: center;
}

Answer 1

你只需要具体。

header h2 {
border-top:none;
}

Answer 2

您可以覆盖<h2>的样式并将边框设置为默认值，如下所示：

h2 {
    border-top: 1px solid white;
}

header h2 {
    border-top: initial;
}

或者，这是我推荐的方法，让你的border-top在课堂上。然后，只有具有该类的<h2>的实例才会有边框：

h2.with_border {
    border-top: 1px solid white;
}

然后在你的HTML中：

<h2 class="with_border">This has a border!</h2>
<h2>This does not have a border!</h2>

Answer 3

CSS允许您组合更复杂的选择器;最简单的方法是后代选择器，它将适用于您的问题。你可以这样写：

header h2 { }

定位h2的任何header儿童（直接或非直接）。例如：

h2 { border-bottom: 1px solid blue; }
header h2 { border-bottom: none; }

<header>
  <h2>No border here!</h2>
</header>


<h2>But here there is</h2>

您还应该了解一下css的工作原理;有各种方法可以选择元素，包括类和属性。你使用哪一个取决于你想要达到的目标以及你需要的具体程度。

Answer 4

我为你创建了一个JSFiddle。

<强> HTML

<h2>Header One</h2>
<h2>Header Two</h2>
<h2>Header Three</h2>

<header>
  <h2>Header Four</h2>
</header>

<强> CSS

h2{
  border-top: 1px solid green;
}

header h2{
  border-top: none;
}

希望这有帮助。

具有相同名称<h2>的标签的不同样式

4 个答案: