Css 是否有一个“问题”；“以前的兄弟姐妹”；选择器？

加号（

+

）表示下一个兄弟姐妹

上一个同级是否有等效项？

否，没有“上一个同级”选择器

另一方面，

~

用于一般后继同级（意味着该元素位于该元素之后，但不一定紧随其后），并且是CSS3选择器<代码>+用于下一个兄弟姐妹，是CSS2.1

---

从和从看。

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

x ~ y

写

y ~ x

显然，这匹配的是“x”而不是“y”，但它回答了“有匹配吗？”的问题，简单的DOM遍历可能比javascript中的循环更有效地找到正确的元素

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

（以前的主题指示符

！

），这将允许您选择一个以前的兄弟：

previous:has(+ next) {}

---

…但在撰写本文时，它已经超出了浏览器支持的前沿。

根据您的具体目标，有一种方法可以实现父选择器的有用性，而无需使用父选择器（即使存在）

假设我们有：

<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>

存在什么：

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

这将所有锚点链接设置为顶部有15px的边距，并将LIs中没有UL元素（或其他标记）的锚点链接重置为0。

不幸的是，没有“上一个”同级选择器，但您仍然可以通过使用定位（例如向右浮动）获得相同的效果。这取决于你想做什么

在我的例子中，我想要一个主要的CSS五星评级系统。我需要给以前的星星上色（或交换图标）。通过正确浮动每个元素，我基本上得到了相同的效果（因此星星的html必须“向后”编写）

在本例中，我使用了FontAwesome，并在fa-star-o和fa-star的unicodes之间进行了交换

CSS:

HTML: (40)

---

jsiddle:

如果您知道确切位置，则基于

：nth-child（）

排除以下所有同级将起作用

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

这将选择第三个之前的所有

li

s（例如第一个和第二个）。但是，在我看来，这看起来很难看，并且有一个非常紧凑的用例

您还可以从右向左选择第n个子项：

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

---

这也是一样的。

目前还没有官方的方法，但你可以用一个小技巧来实现这一点！请记住，这是实验性的，它有一些局限性。。。 （检查您是否担心导航器兼容性）

您可以使用CSS3选择器：名为

nth-child（）的伪类


#list>*{
显示：内联块；
填充：20px28px；
右边距：5px；
边框：1px实心#bbb；
背景：ddd；
颜色：#444；
保证金：0.4em0；
}
#列表：第n个子项（-n+4）{
颜色：#600b90；
边框：1px红色虚线；
背景：橙色；
}
oranges元素是使用li:n子元素（-n+4）选择的上一个兄弟元素li

1.
二,

三,

4.
5.
六,

七,

八,

九,

我找到了一种方法来设计所有以前的兄弟姐妹（与
~
相反）的样式，这可能会根据您的需要而起作用

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


/*默认链接颜色为蓝色*/
.父母a{
颜色：蓝色；
}
/*上一个兄弟姐妹应该是红色的*/
.家长：将鼠标悬停在a上{
颜色：红色；
}
.父a:悬停，
.父级a:悬停~a{
颜色：蓝色；
}

两个技巧。基本上颠倒HTML中所需元素的HTML顺序，并使用

~
下一个同级运算符：

向右浮动
+颠倒HTML元素的顺序

div{/*对父对象执行您所知道的任何操作，以使
内部右浮动元素显示在所需的位置*/
显示：内联块；
}
跨度{
浮动：右；/*将元素向右浮动*/
}
span:hover~span{/*在悬停目标上它是“先前的”；）元素*/
背景：红色；
}

5.
4.
3.
2.
1.
考虑flex和grid布局的
顺序
属性。
我将在下面的示例中重点介绍flexbox，但同样的概念也适用于网格


使用flexbox，可以模拟以前的同级选择器。

特别是，flex
order
属性可以在屏幕上移动元素

下面是一个例子：

当元素B悬停时，您希望元素A变为红色

<ul>
    <li>A</li>
    <li>B</li>
</ul>



在标记中反转同级的顺序。


<ul>
   <li>B</li>
   <li>A</li>
</ul>

li:hover + li { background-color: red; }



使用flex
order
属性恢复可视显示器上同级的顺序。


li:hover + li { background-color: red; }

li:last-child { order: -1; }



…瞧！以前的同级选择器已生成（或至少已模拟）。

以下是完整的代码：


ul{
显示器：flex；
}
李：悬停+李{
背景色：红色；
}
李：最后一个孩子{
顺序：-1；
}
/*非基本装饰风格*/
李{
高度：200px；
宽度：200px；
背景色：浅绿色；
保证金：5px；
列表样式类型：无；
光标：指针；
}

B
A
另一个flexbox解决方案
可以使用HTML中元素的逆序。然后除了使用中的
顺序
外，还可以使用
弹性方向：行反转或
弯曲方向：柱反向取决于您的布局

工作样本：


.flex{
显示器：flex；
弯曲方向：行反向；
/*在“反向”端（即开始）对齐内容*/
证明内容：柔性端；
}
/*悬停目标上的“上一个”元素
li:hover + li { background-color: red; }

li:last-child { order: -1; }

/* all items (will be styled as previous) */
li {
  color: blue;
}

/* the item i want to distinguish */
li.milk {
  color: red;
}

/* next items */
li ~ li  {
  color: green;
}


<ul>
  <li>Tea</li>
  <li class="milk">Milk</li>
  <li>Juice</li>
  <li>others</li>
</ul>

$('p + ul').prev('p')

$("#full-width").find(".companies").parents("#full-width").css( "width", "300px" );

class ReactClass extends Component {
  constructor() {
    this.state = {
       highlightRowIndex: null
    }
  }

  setHighlightedRow = (index) => {
    const highlightRowIndex = index === null ? null : index - 1;
    this.setState({highlightRowIndex});
  }

  render() {
    return (
       <Table>
        <Tbody>
           {arr.map((row, index) => {
                const isHighlighted = index === this.state.highlightRowIndex
                return {
                    <Trow 
                        isHighlighted={isHighlighted}
                        onMouseOver={() => this.setHighlightedRow(index)}
                        onMouseOut={() => this.setHighlightedRow(null)}
                        >
                        ...
                    </Trow>
                }
           })}  
        </Tbody>   
       </Table>
    )
  }
}

const Trow = styled.tr`
    & td {
        background-color: ${p => p.isHighlighted ? 'red' : 'white'};
    }

    &:hover {
        background-color: red;
    }
`;

<ul>
  <li>before</li>
  <li class="target">target</li>
  <li>after</li>
  <li>after</li>
</ul>

ul > li { color: red; }
ul > li.target, ul > li.target ~ li { color: inherit; }

.form-control:focus ~ .form-input-prepend {
    svg path {
        fill: $accent;
    }
}

SELECTOR:not([SELECTOR]FILTER):not([SELECTOR]FILTER + SELECTOR) { ... }

/* Effect only limited when hovering */
TAG.CLASS:not(TAG.CLASS:hover):not(TAG.CLASS:hover + TAG.CLASS) {}
/* Effect only applied when hovering */
PARENT.CLASS:hover > CHILD.CLASS:not(CHILD.CLASS:hover):not(CHILD.CLASS:hover + CHILD.CLASS) {}