Question

我有以下简化的结构，这里的目标是将“ partA ”类的背景颜色设置为粉红色，因为输入有“州”类。

“容器”的内部结构无法更改。

因此，此示例的最终结果将是第一个“内容”标签将突出显示为粉红色。

请注意，在整个页面结构中，任何顺序都可以有任意数量的“容器”，因此只选择第一个容器不是合适的解决方案。

<span class="container">
    <span class="item">
        <span class="partA">Content</span>
        <span class="partB">A</span>
    </span>
    <input class="element state" />
</span>

<span class="container">
    <span class="item">
        <span class="partA">Content</span>
        <span class="partB">B</span>
    </span>
    <input class="element" />
</span>

我认为一般的兄弟选择器可能是解决方案，但它似乎不起作用 - 我相信因为它是父级的兄弟，而不是元素本身。如果我犯了错误，我会尝试两种方式：

.partA ~ .state { background-color: pink; }
.state ~ .partA { background-color: pink; }

我已经使用此结构创建了JSFiddle。

任何人都可以为我提供一个选择器来实现这一目标吗？如果可能的话，我想避免使用JS。

Answer 1

CSS渲染始终处于正向序列中。所以，你想要的只有input在结构中排在第一位才能发挥作用：

＆＃13;

.state ~ span .partA { background-color: pink; }

＆＃13;

<span class="container">
    <input class="element state" />
    <span class="item">
        <span class="partA">Content</span>
        <span class="partB">A</span>
    </span>
</span>

<span class="container">
    <input class="element" />
    <span class="item">
        <span class="partA">Content</span>
        <span class="partB">B</span>
    </span>
</span>

＆＃13;

Answer 2

根据this CSS Tricks article

“CSS中没有父选择器，甚至在CSS3中也没有”

这篇文章值得一读，但我怀疑你能够做到这一点的唯一方法就是使用javascript。

Answer 3

我会提供一种可能对您有用的解决方案。

<强> HTML

<span class="container">
<input class="element state" />
<span class="item">
    <span class="partA">Content</span>
    <span class="partB">A</span>
</span>

<强> CSS

.state ~ .item .partA { background-color: pink; }

这样你可以交换DOM元素，而不是用CSS定位。请看这里的小提琴：http://jsfiddle.net/edkyy360/4/

Answer 4

由于无法使用纯CSS回溯选择器让我们找到一个解决方案，增加最小的努力：

将其放在结束</body>标记之前：

<script>
// Add PINK background to the first `.partA` element whose uncle has `.state`
var stateClass = document.getElementsByClassName("state");
for(var i=0; i<stateClass.length; i++){
  stateClass[i].parentElement.getElementsByClassName("partA")[0].style.background = "pink";
}
</script>

＆＃13;

var stateClass = document.getElementsByClassName("state");

for(var i=0; i<stateClass.length; i++){
  stateClass[i].parentElement.getElementsByClassName("partA")[0].style.background = "pink"
}

＆＃13;

<span class="container">
  <span class="item">
    <span class="partA">Content</span>
    <span class="partB">A</span>
  </span>
  <input class="element state" />
</span>

<span class="container">
  <span class="item">
    <span class="partA">Content</span>
    <span class="partB">B</span>
  </span>
  <input class="element" />
</span>

＆＃13;

CSS兄弟姐妹的儿童选择器

4 个答案: