CSS *选择器，但不包括特定标签

Question

Background

So I found this line of code in our Ext JS's css which removes focus for every element in webkit. Unfortunately it has been almost 2 years and they still haven't addressed their TODO.

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

which compiles to

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

What this does is take away the browsers default focus (UA styles) on links so when the user tabs to an anchor tag they have no UI indication that they are on the tag. I want to use native browser behavior so I don't want to override the a:focus in particular and using initial doesn't work. Also removing the entire style causes UI components to handle their focus UI differently which is not acceptable.

tldr

What is the best approach for applying a style to all tags except a certain tag(s). I know I can make a selector that has all of the tags except the tag I don't want but that is tedious, is that really the best approach ? If so is there a list of valid UI tags for HTML ?

Answer 1

You could use the CSS :not selector, and apply a style to all descendants of .x-webkit except the tag(s) you want to exclude:

 .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>