是否有一个“先前的兄弟”选择器？

CSS

Eva梅村村

2020-03-13

加号（+）用于下一个兄弟姐妹。

以前的兄弟姐妹有同等学历吗？

第1488篇《是否有一个“先前的兄弟”选择器？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共9个回答

GilPro 2020.03.13

根据您的确切目标，有一种无需使用父选择器（即使存在一个父选择器）就可以实现其有用性的方法...

说我们有：

<div>
  <ul>
    <li><a>Pants</a></li>
    <li><a>Socks</a></li>
    <ul>
      <li><a>White socks</a></li>
      <li><a>Blue socks</a></li>
    </ul>
  </ul>
</div>

我们该怎么做才能使袜子块（包括袜子颜色）在空间上显得醒目？

什么会很好，但不存在：

ul li ul:parent {
  margin-top: 15px;
  margin-bottom: 15px;
}

存在什么：

li > a {
  margin-top: 15px;
  display: block;
}
li > a:only-child {
  margin-top: 0px;
}

这会将所有锚链接设置为在顶部具有15px的边距，并且对于LI内部没有UL元素（或其他标签）的那些链接，将其重置为0。

LEY老丝 2020.03.13

目前尚无官方方法可以执行此操作，但是您可以使用一些技巧来实现此目的！请记住，这是实验性的，并且有一定的局限性...（如果您担心导航器的兼容性，请查看此链接）

您可以使用CSS3选择器：伪类称为 nth-child()

#list>* {
  display: inline-block;
  padding: 20px 28px;
  margin-right: 5px;
  border: 1px solid #bbb;
  background: #ddd;
  color: #444;
  margin: 0.4em 0;
}

#list :nth-child(-n+4) {
  color: #600b90;
  border: 1px dashed red;
  background: orange;
}

<p>The oranges elements are the previous sibling li selected using li:nth-child(-n+4)</p>

<div id="list">
  <span>1</span><!-- this will be selected -->
  <p>2</p><!-- this will be selected -->
  <p>3</p><!-- this will be selected -->
  <div>4</div><!-- this will be selected -->
  <div>5</div>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

局限性

您无法根据下一个元素的类别选择上一个元素
伪类也一样

王者一打九银 2020.03.13

如果您知道确切的位置，:nth-child()则将所有以下同胞基于位置排除会起作用。

ul li:not(:nth-child(n+3))

它将选择li第3个（例如1st和2nd）之前的所有s。但是，在我看来，这看起来很丑陋，并且用例非常紧凑。

您还可以从右到左选择第n个子级：

ul li:nth-child(-n+2)

哪个也一样。

JinJin村村 2020.03.13

+是给下一个兄弟姐妹的。以前的兄弟姐妹有同等学历吗？

您可以使用两个斧头选择器：`!`和`?`

There are 2 subsequent sibling selectors in conventional CSS:

+ is the immediate subsequent sibling selector
~ is the any subsequent sibling selector

In conventional CSS, there is no previous sibling selector.

However, in the axe CSS post-processor library, there are 2 previous sibling selectors:

? is the immediate previous sibling selector (opposite of +)
! is the any previous sibling selector (opposite of ~)

Working Example:

In the example below:

.any-subsequent:hover ~ div selects any subsequent div
.immediate-subsequent:hover + div selects the immediate subsequent div
.any-previous:hover ! div selects any previous div
.immediate-previous:hover ? div selects the immediate previous div

div {
  display: inline-block;
  width: 60px;
  height: 100px;
  color: rgb(255, 255, 255);
  background-color: rgb(255, 0, 0);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

code {
  display: block;
  margin: 4px;
  font-size: 24px;
  line-height: 24px;
  background-color: rgba(0, 0, 0, 0.5);
}

div:nth-of-type(-n+4) {
  background-color: rgb(0, 0, 255);
}

div:nth-of-type(n+3):nth-of-type(-n+6) {
  opacity: 1;
}

.any-subsequent:hover ~ div,
.immediate-subsequent:hover + div,
.any-previous:hover ! div,
.immediate-previous:hover ? div {
  opacity: 1;
}

<h2>Hover over any of the blocks below</h2>

<div></div>
<div></div>

<div class="immediate-previous">Hover for <code>?</code> selector</div>
<div class="any-previous">Hover for <code>!</code> selector</div>
<div class="any-subsequent">Hover for <code>~</code> selector</div>
<div class="immediate-subsequent">Hover for <code>+</code> selector</div>

<div></div>
<div></div>

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

AStafan 2020.03.13

另一个flexbox解决方案

您可以使用相反的HTML元素顺序。然后，除了order像在Michael_B的答案中那样使用之外，您还可以使用flex-direction: row-reverse;或flex-direction: column-reverse;根据您的布局。

工作样本：

.flex {
  display: flex;
  flex-direction: row-reverse;
   /* Align content at the "reversed" end i.e. beginning */
  justify-content: flex-end;
}

/* On hover target its "previous" elements */
.flex-item:hover ~ .flex-item {
  background-color: lime;
}

/* styles just for demo */
.flex-item {
  background-color: orange;
  color: white;
  padding: 20px;
  font-size: 3rem;
  border-radius: 50%;
}

<div class="flex">
  <div class="flex-item">5</div>
  <div class="flex-item">4</div>
  <div class="flex-item">3</div>
  <div class="flex-item">2</div>
  <div class="flex-item">1</div>
</div>

Sam飞云 2020.03.13

我有同样的问题，但后来我有一个“ duh”时刻。而不是写

x ~ y

写

y ~ x

显然，它匹配“ x”而不是“ y”，但是它回答了“是否存在匹配？”。问题，简单的DOM遍历可能比循环javascript更有效地将您带到正确的元素。

我意识到原来的问题是CSS问题，因此该答案可能完全不相关，但是其他Javascript用户可能会像我一样通过搜索偶然发现该问题。

StafanGO 2020.03.13

选择器级别4引入了:has()（以前是subject指示器!），它允许您使用以下选项选择先前的同级：

previous:has(+ next) {}

…但是在撰写本文时，它离浏览器支持的极限还有一段距离。

LEY番长 2020.03.13

不，没有“上一个兄弟”选择器。

与此相关的是，~它用于一般后继兄弟（这意味着该元素在此之后，但不一定紧随其后），并且是CSS3选择器。+是下一个兄弟姐妹，是CSS2.1。

看到相邻的兄弟组合子从选择器3级和5.7相邻同胞选择从层叠样式表级别2版本1（CSS 2.1）规范。

卡卡西Near 2020.03.13

我找到了一种样式来设置所有先前的兄弟姐妹（与相反~）的方式，具体取决于您的需求。

假设您有一个链接列表，将鼠标悬停在一个链接上时，所有先前的链接都应变为红色。您可以这样做：

/* default link color is blue */
.parent a {
  color: blue;
}

/* prev siblings should be red */
.parent:hover a {
  color: red;
}
.parent a:hover,
.parent a:hover ~ a {
  color: blue;
}

<div class="parent">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

局限性

您可以使用两个斧头选择器：!和?

另一个flexbox解决方案

您可以使用两个斧头选择器：`!`和`?`