CSS Select 具有特定子元素的元素的兄弟元素？

Question

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

我需要匹配 .stepTitleAndImages ul.standard

旁边的所有 .stepText 元素

换句话说，匹配所有 .stepText 个元素，这些元素有 .step 个父元素有 .stepTitleAndImages 个子元素有 .stepImages.standard 个子元素

<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 以外的任何东西。

Answer 1

只用它来选择第一个案例

.step:nth-child(1) .stepText {
... Your CSS here
}

第二次使用

.step:nth-child(2) .stepText {
... Your CSS here
}

要选择两者，请使用

.step .stepText {
... Your CSS here
}

那么你应该需要 jquery

仅使用纯 CSS 无法选择 Parents 同级，您可以通过一行 jquery 实现此目的：

$('ul.standard').parent().siblings(".stepText").css(...your CSS here);

Answer 2

不能用你的HTML结构和纯CSS来完成。最接近您的问题的解决方案是更改 HTML 结构并使用纯 CSS，将 standard class 移动到其父标签：

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

这将允许您使用 adjacent sibling selector (+)，它匹配 第二个选择器，如果它是第一个 的直接下一个兄弟，像这样：

.stepTitleAndImages.standard + .stepText { /* Styles */ }

一种更灵活的方法是使用 general sibling selector，它将匹配 第一个选择器 前面的任何兄弟，而不仅仅是直接的下一个：

.stepTitleAndImages.standard ~ .stepText { /* Styles */ }

:has伪classis in development by Mozilla，但它还没有命中任何稳定的浏览器。有了它和你的 HTML 结构，你可以去：

.stepTitleAndImages:has(.standard) + .stepText { /* Styles */ }

不幸的是，目前您无法仅使用 CSS（以及您的 HTML 结构）以任何其他方式解决此问题。

CSS Select 具有特定子元素的元素的兄弟元素？

CSS Select Sibling of An Element with A Specific Sub-Element?

css

parent

siblings

selector