CSS attribute selector class starts with but not e

2020-05-06 17:09发布

问题:

I want to apply css to all class that starts with for example 'abcd-' but I don't want to apply that css to class with name for example 'abcd-dontapply'. Can I do this?

What I tried

 a[class |= "abcd"] :not([class = "abcd-dontapply"])
 {
     ---define CSS 
 }

But this is not working, it is not applying CSS to any class that starts with 'abcd-'.

回答1:

As mentioned in your question:

Don't add whitespace unnecessarily. The whitespace just before the :not is significant, i.e. it changes the meaning of the selector.


a[class^="abcd"]:not(.abcd-dontapply)
{
    /* define CSS here*/
}

You can find all attribute selectors specifications here.



回答2:

You can do that with proper css selectors: starts with selector would be like-

div[class^="abc"]:not([class="abc2"])

I have a sample jsfiddle for you: http://jsfiddle.net/8w65ffj0/1/