CSS 选择器的部分分组

Question

我似乎找不到这个问题的答案，所以要么不可能，要么我的搜索措辞不正确 - 我希望这里有人可以提供帮助？ :)

我有一些 HTML（在我的例子中是 UL）grand-parent（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>

我想 select 仅当 UL 元素的祖父母 (div) 有兄弟姐妹时。

我打算使用前面的 select 或者..类似

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

但我似乎无法让它工作。

非常感谢任何指导！

Answer 1

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

您需要 select 父 div 如果它有兄弟姐妹。我不确定您原来的 select 或在做什么，但这是错误的。

片段：

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

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

没有的片段：

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

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

Answer 2

你可以这样做：

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

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

这与 ~ 方法有两个优点：

-它从 div 中选择所有 ul，而不仅仅是从一个 div 中选择。

-更易读。

CSS 选择器的部分分组

Partial grouping of a CSS selector

css

css-selectors