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>元素

 <ul id="bubbles">

        <li id="firstCircle"></li>



        </ul>

PS：我无法修改HTML。不能使用纯CSS以外的任何东西。

Answer 1

只需使用它来选择第一个案例

textarea

第二次使用

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

选择使用

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

然后你应该要求jquery

选择Parents sibling不仅仅适用于纯CSS，你可以通过一行jquery来实现：

.step .stepText {
... 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>

这将允许您使用adjacent sibling selector（+），如果它是第一个的直接下一个兄弟，则匹配第二个选择器，如下所示：

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

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

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

:has伪类is in development by Mozilla，但它还没有打到任何稳定的浏览器。有了它，你的HTML结构，你可以去：

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

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

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

2 个答案: