Question

我想将一个样式仅应用于容器的绝对第一个元素，如果它是h1，h2或h3 ......但是，如果在同一页面中有不同的标题（h1，h2，h3）），只有第一个应该继承样式。

例如。

<div class="container">
   <h2>I want to change this</h2>

   <p>....</p>
   <h3>But not this!</h3>
   <h2>and not this!</h2>
</div>

我尝试使用此代码：

.container h1:first-of-type, .container h2:first-of-type, .container h3:first-of-type {
    padding-top: 0 !important;
}

问题是第一个H2和H3都受此代码的影响。

我甚至试过这个......但没有成功：

.container > h1:first-of-type, .container > h2:first-of-type, .container > h3:first-of-type {
    padding-top: 0 !important;
}

我该怎么做？

Answer 1

现在再试一次，我想这就是你要找的那个

<!DOCTYPE html>
<html>
<head>
<style>
.container > h1:first-child{
    background-color: yellow;
}
.container > h2:first-child  {
    background-color: orange;
}
.container > h3:first-child {
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
   <h2>I want to change this</h2>

   <p>....</p>
   <h3>But not this!</h3>
   <h2>and not this!</h2>
</div>

</body>
</html>

Answer 2

你不能按照你的想法去做。但您可以尝试在每种可能的组合中使用sibling combinator ~撤消所做的更改。

这是一个相当长的CSS代码。使用less可以让这更舒服。见codepen

.container > h1,
.container > h2,
.container > h3 {
  background: red;
}
.container > h1 ~ h1,
.container > h2 ~ h1,
.container > h3 ~ h1,
.container > h1 ~ h2,
.container > h2 ~ h2,
.container > h3 ~ h2,
.container > h1 ~ h3,
.container > h2 ~ h3,
.container > h3 ~ h3 {
  background: transparent;
}

<div class="container">
   <h2>I want to change this</h2>

   <p>...</p>
   <h3>But not this!</h3>
   <h2>and not this!</h2>
</div>

只选择第一个元素，无论类型

2 个答案: