Question

在Safari（最新版本的El Capitan OS X）和iOS 9以下代码可以使用，但我不确定为什么只在这里，而不是Mac OS X上最新版本的Chrome和Firefox。

<section id="content" class='special-content'>
...
<article>
    <ul>
        <li>Headline
        <ul>
            <li>Explanation 1</li>
            <li>Explanation 2</li>
            <li>Explanation 3</li>
        </ul>
        </li>
    </ul>
</article>

这是有问题的事情：

@media (min-width: 500px) {
    .special-content ul:not(ul li ul) { display: table; }
    .special-content ul li:not(ul li ul li) {
        vertical-align: middle;
        display: inline-table;
        border-spacing: 1rem;
        border: 1px solid #469A79;
    }
    .special-content ul li:not(ul li ul li) { margin-bottom: 0}
}

.special-content ul li:not(ul li ul li) { color: red; }
.special-content ul li:not(ul li ul li) ul li { color: green; }

Answer 1

您需要阅读有关多个选择器的:not。

.special-content ul li:not(ul):not(li):not(ul):not(li){ color: green; }

Ps：如果这种方法不能满足你的问题。您应该添加class，以便可以概括ul li选择器。

CSS选择器：not（）仅在Safari中工作

1 个答案: