Question

考虑我有这个DOM，

<div id="banner-message">
  <p>Hello World</p>
  <button>Hover to change color</button>
</div>

我想从p中选择button为什么以下css不起作用？

#banner-message {
  button {
    & + p {
      color: red;
    }
  }
}

Answer 1

删除button + p。顺便说一句，在您的SCSS中，您选择p + button，但在您的标记中$('input[type="radio"]').on('change', function() { var results = $('input[type="radio"]:checked').map(function() { return this.value; }).get(); });。有关演示

，请参阅here

Answer 2

由于您正在遍历以前的兄弟姐妹，因此给出的代码无效。 CSS选择器适用于下一个兄弟姐妹。没有先前的兄弟选择器。有关详细信息，请参阅Is there a "previous sibling" CSS selector?的已接受答案。否则你将不得不改变@Andy Aldo提到的标记。

Answer 3

使用+选择器，您在按钮后选择<p> ... 请参阅：https://jsfiddle.net/8y2mstbo/2/

Answer 4

使用css选择前一个元素是不可能的。所以你应该为此尝试脚本，否则你应该改变结构。

CSS邻近选择器不起作用

4 个答案: