Question

背景

所以我在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标签列表？

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>

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

1 个答案: