Shulou(Shulou.com)05/31 Report--

This article mainly introduces "in CSS: how to use Where and: Is pseudo-class functions". In daily operation, I believe that many people have doubts about how to use Where and: Is pseudo-class functions in CSS. Xiaobian 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: Where and: Is pseudo-class functions". Next, please follow the editor to study!

What is is and: where?

: is () and: where () are pseudo-class functions that help shorten and stop repetition when creating selectors. They all accept the parameter array of the selector (id, class, tag, etc.) and select any element that can be selected in the list.

This may not make much sense in how to help us write shorter selectors, so let's try: where () and: is ().

How to use: is and: where?

Where () can help us solve problems like this

.btn span > a:hover, # header span > a:hover, # footer span > a:hover {...}

Into something like this.

: where (.btn, # header, # footer) span > a:hover {...}

And: is () can help add the same example to the example

Is (.btn, # header, # footer) span > a:hover {...}

What's the difference between is and where?

: where () and: is () look and function the same, but one difference between them is that they have different particularities. Where () is simple, and its specificity is always 0, while the specificity of is () is the strongest selector.

What is CSS specificity (in short)?

There are four levels of specificity in CSS. Each level or category has a different score, and we can add all the scores to calculate the specificity of the selector.

The style of the element that has the largest number of selectors will be applied to that element, which is why sometimes when you write CSS, your style will not be applied and will be displayed as an underline in the development tool.

Specificity grade score

The specificity of ID-- is 100.

Inline style-specificity score 1000

Elements and pseudo-classes-specificity score 1

Classes, pseudo-classes and attributes-specificity scores of 10

For example

Button.btn {color: red;} .btn {color: green;}

.btn = 10

Button.btn = 1 + 10 = 11

If we put the .btn class on the label, the text will turn red because the button.btn selector has a higher score than the .btn selector.

As you can see, there are two different levels of specialization of pseudo-classes, because different pseudo-classes may have different specialties, depending on which pseudo-classes you use and how you use them.

At this point, the study of "in CSS: how to use Where and: Is pseudo-class functions" 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.