CSS选择具有特定子元素的元素的同级？ [英] CSS Select Sibling of An Element with A Specific Sub-Element?

问题描述

下面的代码段是包含许多.step元素的更大结构的一部分。

The snippet below is a part of a much larger structure with many .step elements.

我需要匹配所有 .stepText .stepTitleAndImages ul.standard

I need to match all .stepText elements that are next to .stepTitleAndImages ul.standard

的元素code>匹配所有 .stepText 元素具有 .step 父元素且元素具有 .stepTitleAndImages 具有 .stepImages.standard 的孩子

In other words, match all .stepText elements that have .step parent that has .stepTitleAndImages child that has .stepImages.standard child

<div class="step">
  <div class="stepTitleAndImages">
    <h3 class="stepTitle"></h3>
    <ul class="stepImages standard"></ul>
    <div class="clearer"></div>
  </div>
  <div class="stepText "></div>  **HOW TO SELECT ALL ELEMENTS LIKE THIS ONE?**
  <div class="clearer"></div>
</div>

<div class="step">
  <div class="stepTitleAndImages">
    <h3 class="stepTitle"></h3>
    <ul class="stepImages medium"></ul>
    <div class="clearer"></div>
  </div>
  <div class="stepText "></div>
  <div class="clearer"></div>
</div>

PS：我无法修改HTML。除纯CSS外，不能使用其他任何东西。

PS: I cannot modify the HTML. Cannot use anything other than pure CSS.

推荐答案

此无法使用您的HTML结构和纯CSS完成。对于您的问题，最接近的解决方案是更改HTML结构并使用纯CSS，将 standard 类移至其父标记：

This cannot be done with your HTML structure and with pure CSS. The closest solution to your problem, changing the HTML structure and with pure CSS, would be to move the standard class to its parent tag:


< div class = stepTitleAndImages standard>
< h3 class = stepTitle>< / h3>
< ul class = stepImages>< / ul>
< div class = clearer>< / div>
< / div>


这将允许您使用相邻的同级选择器（ + ），如果第二个选择器与这是第一个的直接下一个兄弟姐妹，例如：

This would allow you to use the adjacent sibling selector (+), which matches the second selector if it's the direct next sibling of the first, like this:


.stepTitleAndImages.standard + .stepText {
/ *样式* /
}


更灵活的方法是使用通用兄弟选择器，该匹配器会匹配任何以第一个选择器，而不仅仅是直接下一个选择器：

A more flexible approach would be to use the general sibling selector which would match any sibling preceded by the first selector, not only the direct next one:


.stepTitleAndImages.standard〜.stepText {
/ *样式* /
}


：有伪类 ，但是目前还没有稳定的浏览器。有了它，并有了HTML结构，您可以执行以下操作：

The :has pseudo-class is in development by Mozilla, but it hasn't hit any stable browsers yet. With it, and with your HTML structure, you could go:


.stepTitleAndImages：has（.standard）+ .stepText {
/ *样式* /
}


不幸的是，当前您无法在仅使用CSS（以及HTML结构）的任何其他方式。

Unfortunately, currently you can't solve this in any other way with CSS (and with your HTML structure) only.

这篇关于CSS选择具有特定子元素的元素的同级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！