选择器div + p(加号)和div〜p(波浪号)之间的差异


89

w3schools表达它的方式,听起来是一样的。

W3Schools的CSS参考

div + p
选择所有<p>紧随<div>元素之后的元素

div ~ p
选择<p>元素前面的每个<div>元素

如果一个<p>元素紧接在一个<div>元素之后,那是否不意味着该<p>元素前面有一个<div>元素?

无论如何,我正在寻找一个选择器,可以在其中选择紧接给定元素之前的元素。


5
+是直接的下一个p元素,并且~所有下一个p元素(在每个div元素之后)
vsync

2
你做不到before。不可能。仅适用于javascript。您必须寻找它,所有这些before都是要在CSS中定位的类。
vsync 2014年

7
也请尝试避免w3schools :) w3fools.com
Alex Char

3
看到此内容以进行直观说明
Marc B

2
关于这个问题的一个有趣的事情是它以前没有被问过。至少我找不到类似的问题。
Hashem Qolami 2014年

Answers:


120

相邻的兄弟选择器X + Y

相邻的同级选择器具有以下语法:E1 + E2,其中E2是选择器的主题。如果E1和E2在文档树中共享同一父级,并且E1紧随E2而不考虑非元素节点(例如文本节点和注释),则选择器匹配。

ul + p {
   color: red;
}

在此示例中,它将仅选择紧接在前一个元素之后的元素。在这种情况下,只有每个ul之后的第一段会有红色文本。

通用同级选择器X〜Y

〜组合器分隔两个选择器,并且仅在第二个选择器后面有第一个选择器时才与第二个选择器匹配,并且两者都共享一个公共父级。

ul ~ p {
   color: red;
}

该同级组合器类似于X + Y,但是它的严格性较差。虽然相邻的选择器(ul + p)将仅选择前一个选择器紧随其后的第一个元素,但该选择器的含义更为广泛。参照上面的示例,它将选择任何p个元素,只要它们遵循ul即可。

资源

code.tutsplus

通用兄弟选择器MDN

相邻兄弟选择器w3


6
这个答案无非是引用另一篇文章,而没有试图解决眼前的具体问题。给出的示例也不能很好地解决该问题。
BoltClock

1
@BoltClock谢谢,我明白了。我一直欢迎您的反馈。但是我认为我的回答向OP解释了这些选择器之间的区别。
Alex Char

确实如此。尽管它并未完全解决问题,但它在说明两个选择器之间的差异方面做得很合理。
BoltClock

@AlexChar为了更好地表明这两者之间的差别,你应该利用两个X + Y和X〜Y.相同的HTML例子
thecoolmacdude

@thecoolmacdude完成。感谢您的反馈。现在我认为更加清楚。
Alex Char

22

如果一个<p>元素紧接在一个<div>元素之后,那是否不意味着该<p>元素前面有一个<div>元素?

这是对的。换句话说,div + p是一个真子集div ~ p-任何通过前者匹配的是同样由后者相匹配,必然。

+和之间的区别~是,~只要它们都共享相同的父对象,无论它们与第一个元素的接近程度如何,它都与之匹配。

通过一个示例最简洁地说明了这两点,其中每个规则都应用了不同的属性。请注意,p紧随的div是同时应用了两个规则:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}
<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

无论如何,我正在寻找一个选择器,可以在其中选择紧接给定元素之前的元素。

不幸的是,还没有人


8

考虑这个例子:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 
<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>


0

1)相邻兄弟选择器(S1 + S2)

相邻的同级选择器用于选择紧邻另一个指定元素的指定元素。这两个元素应处于同一级别。

div + p {
    color:red;
}

相邻兄弟选择器示例

2)通用同级选择器(S1〜S2)

通用同级选择器用于选择另一个指定元素的所有指定同级元素。

div ~ p {
   color:red;
}

通用兄弟选择器示例

相邻兄弟(S1 + S2)与常规兄弟(S1〜S2)选择器:

相邻的同级(S1 + S2)选择器仅选择直接同级元素,而常规同级(S1〜S2)选择器选择另一个指定元素的所有同级元素。两种情况下,两个元素(S1和S2)都应处于同一级别。

其余的选择器在这里进行了说明:https : //www.csssolid.com/35-css-selectors-to-remember.html

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.