Question

在以下情况下，

<h2 class='first'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='second'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='third'>h2</h2>

我只想在h2.first和h2.second之间选择p。我尝试了选择同级，但是它选择了所有同级元素。

Answer 1

您可以选择p之后的每个.first，更改属性，然后为unset之后的每个p选择.second的所有属性：

h2.first ~ p {
  color: red;
}

h2.second ~ p {
  color: unset;
}

<h2 class='first'>h2</h2>
<p>p</p>
<p>p</p>
<p>p</p>
<h2 class='second'>h2</h2>
<p>p</p>
<p>p</p>
<p>p</p>
<h2 class='third'>h2</h2>

Answer 2

如果您只有这些p标签（之前没有任何其他p标签），则可以使用

p:nth-child(-n+3) {
    margin-right: 0;
}

这允许您设置前3个p-Tag的样式，因为-n将进入负数区域（-0，-1，-2，-3，...），而在第一种情况下为-0 + 3 = 3，最多设置3个样式，在这种情况下，这是您的前3个p-Tags

否则，我建议您使用类或id以便在DOM中搜索您想要的p标签，例如将其放入div或围绕p标签扩展h标签。

Answer 3

这是一种可以在兄弟姐妹之间应用css的方法，在下面的示例中，我将css应用于div.first和div.second旁边的所有p元素兄弟姐妹：

div.first + div.second p {
    color: tan;
}

	<div class='first'>
		<h2 >h2</h2>
	    <p>p</p>
	    <p>p</p>
	    <p>p</p>
	</div>
	<div class='second'>
		<h2 >h2</h2>
	    <p>p</p>
	    <p>p</p>
	    <p>p</p>
	</div>
	<div class='third'>
		<h2 >h2</h2>
	    <p>p</p>
	    <p>p</p>
	    <p>p</p>
	</div>

Answer 4

在这种情况下，您已使用CSS兄弟选择器(~)，如下所示：

h2.first ~ p { color: blue}

Answer 5

您可以为.first和.second的同胞选择p的“〜”选择器，然后为.third下的同胞p取消设置或赋予其他颜色。

这里是代表，请看一下：

h2:not(.third) ~ p {
  color: red;
}

h2.third ~ p {
  color: green;
}

<h2 class='first'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='second'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='third'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>

有没有办法让CSS在同级和同级之间选择？

5 个答案: