CSS*选择器但排除特定标记

Question

背景

所以我在Ext JS的 css中找到了这行代码,它删除了webkit中每个元素的焦点.不幸的是,它已经差不多2年了,他们仍然没有解决他们的TODO问题.

    // TODO: remove outline from individual components that need it instead of resetting globally
.#{$prefix}webkit {
    * {
        &:focus {
            outline:none !important;
        }
    }
}

编译成

.x-webkit *:focus {
  outline: none !important;
}

这样做会消除链接上的浏览器默认焦点(UA样式),因此当用户选中锚标记时,他们没有UI指示它们在标记上.我想使用本机浏览器行为,所以我不想a:focus特别重写,使用初始化不起作用.同样删除整个样式会导致UI组件以不同方式处理其焦点UI,这是不可接受的.

tldr

将样式应用于除某个标记之外的所有标记的最佳方法是什么.我知道我可以创建一个包含所有标签的选择器,除了我不想要的标签,但这很乏味,这真的是最好的方法吗？如果有,是否有HTML的有效UI标签列表？

Answer 1

您可以使用CSS :not选择器,并将样式应用于.x-webkit除要排除的标记之外的所有后代:

.x-webkit *:not(p):not(em) {
  color: red;
}

<div class="x-webkit">
  <div>red</div>
  <ul><li>red</li></ul>
  <p>
    Not red<br>
    <strong>red</strong><br>
    <em>Not red</em>
  </p>
  <table><tr><td>red</td></tr></table>
</div>