Question

我似乎无法找到答案，所以要么不可能，要么我没有正确写入我的搜索 - 我希望有人可以提供帮助吗？：）

我有一些HTML（在我的例子中为UL），他们的祖父母（div）偶尔会有一个兄弟姐妹，偶尔也没有。这方面的一个例子可能是：

无兄弟示例

<section>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
</section>

同级示例

<section>
    <div id="sibling1">xxx</div>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
    <div id="sibling2">yyyy</div>
</section>

我只想在祖父母（div）有兄弟姐妹的情况下选择UL元素。

我打算使用前面的选择器......比如

section div div#item ~ ul 
{
    background: #ff0000;
}

但我似乎无法让它发挥作用。

任何指导都非常有用！

Answer 1

section div~div div#item ul 
{
    background: #ff0000;
}

如果父div有兄弟，你需要选择它。我不确定你原来的选择器在做什么，但这是错误的。

代码段：

＆＃13;

section div~div div#item ul 
{
    background: #ff0000;
}

＆＃13;

<section>
    <div id="sibling1">xxx</div>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
    <div id="sibling2">yyyy</div>
</section>

＆＃13;

没有的片段：

＆＃13;

section div~div div#item ul 
{
    background: #ff0000;
}

＆＃13;

<section>
    <div>
        <div id="item">
            <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
            </ul>
        </div>
    </div>
</section>

＆＃13;

Answer 2

你可以这样做：

section>div:not(:only-child) ul{
    background: red;
}

这是一支有两个部分的笔，因此您可以看到它有效：http://codepen.io/vandervals/pen/qdqMvq

这有〜方法的两个优点：

- 它不仅从一个div中选择div中的所有ul。

- 更具可读性。

CSS选择器的部分分组

2 个答案: