w3schools表达它的方式,听起来是一样的。
div + p
选择所有<p>
紧随<div>
元素之后的元素
div ~ p
选择<p>
元素前面的每个<div>
元素
如果一个<p>
元素紧接在一个<div>
元素之后,那是否不意味着该<p>
元素前面有一个<div>
元素?
无论如何,我正在寻找一个选择器,可以在其中选择紧接在给定元素之前的元素。
w3schools表达它的方式,听起来是一样的。
div + p
选择所有<p>
紧随<div>
元素之后的元素
div ~ p
选择<p>
元素前面的每个<div>
元素
如果一个<p>
元素紧接在一个<div>
元素之后,那是否不意味着该<p>
元素前面有一个<div>
元素?
无论如何,我正在寻找一个选择器,可以在其中选择紧接在给定元素之前的元素。
before
。不可能。仅适用于javascript。您必须寻找它,所有这些before
都是要在CSS中定位的类。
Answers:
相邻的兄弟选择器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即可。
资源
如果一个
<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>
无论如何,我正在寻找一个选择器,可以在其中选择紧接在给定元素之前的元素。
不幸的是,还没有人。
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
+
是直接的下一个p
元素,并且~
是所有下一个p
元素(在每个div
元素之后)