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

加号（

+

）表示下一个兄弟姐妹

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

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

另一方面，

~

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

请参阅from和from。

否，没有“先前同级”选择器

另一方面，

~

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

---

从和从看。

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

x ~ y

写

y ~ x

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

---

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

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

x ~ y

写

y ~ x

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

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

（以前的主题指示符

！

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

previous:has(+ next) {}

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

（以前是主题指示器

！

），这将允许您选择具有以下功能的以前的兄弟姐妹：

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。

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

假设我们有：

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

JSFiddle:

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

在我的例子中，我想要一个主要的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)

---

这也是一样的。

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

：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.
六,

七,

八,

九,

目前还没有官方的方法可以做到这一点，但您可以使用一些小技巧来实现这一点！请记住，这是实验性的，它有一些局限性。。。
（检查您是否担心navigator c
/* 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) {}