Shulou(Shulou.com)06/03 Report--

This article mainly introduces "css pseudo-class selector: is: introduction of not". In daily operation, I believe many people have doubts about the introduction of css pseudo-class selector: is: not. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "css pseudo-class selector: is: not introduction"! Next, please follow the editor to study!

From the name alone, we should be able to have a general understanding of it, non-selective, excluding other elements in parentheses

In the simplest example, use CSS to change the font color in div to blue except for the P tag without changing html.

I'm blue.

I'm black.

I'm blue. I'm blue.

The previous practice

Div span,div h3,div h4, div h5, {color: blue;}

Not writing method

Div:not (p) {color: blue;}

From the above example, we can clearly understand the role of not pseudo-class selector.

Next upgrade, ask: change the color of other fonts in div except span and p to blue

Div:not (p): not (span) {color: blue;}

There are more concise methods, as follows, but currently they are not very compatible and are not recommended.

Div:not (pdome span) {color: blue;}

Compatible

Except for IE8, all major browsers currently support it, so you can rest assured to use it.

: is

The: is () CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

That's MDN's explanation.

Before you say is, you need to know about matches.

What is the relationship between matches and is?

Matches is the previous life of is, but it is essentially the same thing, the usage is exactly the same.

The meaning of the word matches matches its function very well, but it is the opposite of not. As the opposite of not, matches does look out of place this time, and the word is not concise enough, so it has been renamed, and there is also an issue https://github.com/w3c/csswg-drafts/issues/3258, which is the source of its renaming.

Well, now that we know that matches and is are actually the same thing, what is the use of is?

For example: the p tags under header and main will turn blue when the mouse is hover

Put the mouse up to turn blue

Put the mouse up to turn blue

Normal font

Put the mouse up to turn blue

Put the mouse up to turn blue

Normal font

Normal font

Normal font

The previous practice

Header ul p:hover,main ul p:hover {color: blue;}

Is writing method

: is (header, main) ul p:hover {color: blue;}

You can probably see the left and right sides of is from the above example, but it does not fully reflect the power of is, but when you choose more content, especially those with more levels, you will find how concise the writing of is is. Take an example of MDN.

The previous way of writing

/ * Level 0 * / H2 {font-size: 30px;} / * Level 1 * / section H2 section article H2 section aside H2 section aside H2 section section H2 * / * Level 2 * / nav H2, section article H2, section aside H2, section nav H2 paper article article H2 article, aside H2 article H2, article nav H2 parting section H2 parallelism aside article H2 parenthood aside H2 parallels nav H2 department nav section H2 department nav article H2 department nav aside H2 department nav nav H2 {font-size: 20px;}

Is writing method

/ * Level 0 * / H2 {font-size: 30px;} / * Level 1 * /: is (section, article, aside, nav) H2 {font-size: 25px;} / * Level 2 * /: is (section, article, aside, nav): is (section, article, aside, nav) H2 {font-size: 20px;}

It can be seen that with the increase of nesting levels, the advantages of is become more and more obvious.

When you have finished talking about is, you must know any. As mentioned earlier, is is the replacement of matches.

What is the relationship between any and is?

Yes, is is also a substitute for any. It solves some drawbacks of any, such as browser prefixes, selective performance, etc.

Any works exactly the same as is, except that it requires a browser prefix, which is used as follows

:-moz-any (.b, .c) {}:-webkit-any (.b, .c) {}

Conclusion

Through the above introduction, we roughly describe the relationship among the css pseudo-class is,not,matches,any.

At this point, the study on "css pseudo-class selector: introduction to is: not" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.