CSS 选择器：not() 仅适用于 Safari [重复]

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 选择器。