Gibt es eine Auswahl für „vorherige Geschwister'?
P粉615829742
P粉615829742 2023-08-15 14:55:25
0
2
550
<p>Der Plus-Selektor (<code>+</code>) wählt das nächste benachbarte Geschwisterelement aus. </p> <p>Gibt es einen gleichwertigen Selektor zum Auswählen des vorherigen Geschwisters? </p>
P粉615829742
P粉615829742

Antworte allen(2)
P粉742550377

我找到了一种方法来为所有先前的兄弟元素(与~相反)设置样式,这取决于您的需求。

假设您有一个链接列表,当悬停在其中一个链接上时,所有先前的链接都应该变成红色。您可以这样做:

/* 默认链接颜色为蓝色 */
.parent a {
  color: blue;
}

/* 先前的兄弟元素应为红色 */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}
<div class="parent">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
</div>
P粉014293738

不,没有“前一个兄弟选择器”。

相关的是,~ 是用于一般的后继兄弟选择器(意味着元素在此元素之后,但不一定紧随其后),是一个CSS3选择器。 + 是用于下一个兄弟选择器,是CSS2.1。

请参见来自Selectors Level 3相邻兄弟选择器和来自Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification5.7 相邻兄弟选择器

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage