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

In this article, the editor introduces in detail "css pseudo-class selector: is: not case analysis", with detailed content, clear steps and proper handling of details. I hope this article "css pseudo-class selector: is: not case analysis" can help you solve your doubts.

: not

The:not () CSSpseudo-classrepresentselementsthatdonotmatchalistofselectors.Sinceitpreventsspecificitemsfrombeingselected,itisknownasthenegationpseudo-class.

That's MDN's explanation of not.

Recommended study: CSS video tutorial

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.

I'm blue.

I'm blue.

I'm blue.

The previous practice

Divspan,divh3,divh4,divh5, {

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 () CSSpseudo-classfunctiontakesaselectorlistasitsargument,andselectsanyelementthatcanbeselectedbyoneoftheselectorsinthatlist.Thisisusefulforwritinglargeselectorsinamorecompactform.

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

Headerulp:hover,mainulp:hover {

Color:blue

}

Is writing method

: is (header,main) ulp: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

/ * Level0*/

H2 {

Font-size:30px

}

/ * Level1*/

Sectionh2,articleh2,asideh2,navh2 {

Font-size:25px

}

/ * Level2*/

Sectionsectionh2,sectionarticleh2,sectionasideh2,sectionnavh2

Articlesectionh2,articlearticleh2,articleasideh2,articlenavh2

Asidesectionh2,asidearticleh2,asideasideh2,asidenavh2

Navsectionh2,navarticleh2,navasideh2,navnavh2 {

Font-size:20px

}

Is writing method

/ * Level0*/

H2 {

Font-size:30px

}

/ * Level1*/

: is (section,article,aside,nav) H2 {

Font-size:25px

}

/ * Level2*/

: 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) {

}

After reading this, the article "css pseudo-Class Selector: is: not instance Analysis" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

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.