CSS选择具有特定子元素的元素的兄弟姐妹？

Question

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

我需要匹配所有.stepText旁边，是元素.stepTitleAndImages ul.standard

换句话说，匹配所有.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 还不能选择父级兄弟姐妹，您可以通过一行 jquery 来实现：

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

Answer 2

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

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

这将允许您使用相邻的兄弟选择器( + )，如果第二个选择器是第一个的直接下一个选择器，则它匹配第二个选择器，如下所示：

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

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

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

:has伪类正在由 Mozilla 开发，但它还没有在任何稳定的浏览器上运行。 有了它，以及你的 HTML 结构，你可以去：

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

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