CSS * 选择器但排除特定标签答案

【问题标题】：CSS * selector but exclude a particular tagCSS * 选择器但排除特定标签
【发布时间】：2015-06-21 02:15:26
【问题描述】：

背景

所以我在 Ext JS's 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 并且使用 initial 不起作用。此外，移除整个样式会导致 UI 组件以不同方式处理其焦点 UI，这是不可接受的。

tldr

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：