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

This article will explain in detail how to use is () and: where () in CSS. The content of the article is of high quality, so the editor will share it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Newcomers in the introduction to CSS, often the most confused is two things (personal ideas): 1. CSS is based on document flow, sometimes the code written does not meet their expectations! two。 The complex selector, which selector is used in what scene, is too long, which annoys the newcomer. Recently, such a code was found in the company's code.

.home .col .card an i.i1meme .home .col .card an i.i2meme .home .col .card an i.i3 Magi .home .col .card an i.i4 ..home .col .card an i.i5 school .home .col .card an i.i5 school .home .col .card an i.i6 school .home .card .card an i.i7 {background-size: 35px; width: 60px; height: 42px; margin: auto;}

At first glance, there are a lot of them. As a handover, I was really stunned. It's too long.

You can use your own brains and try different solutions to simplify the shorthand section of the code!

In this article, we will talk about the more efficient selector of CSS3, which ensures a bright selector in front of people's eyes.

: is

Use less code to select elements more effectively! 666, awesome!

To put it simply, simplify the code by extracting a common selector!

Note:: is () original name: match ()

Example 1. Global: is

Scenario: during front-end development, in some cases, the color of the text may be the same under different div.

For example, the following three div, the text color of the three div is red.

P1

P2

P3

Initial version (novice)

For many beginners, there is indeed the following way to write: make the same settings for different div's p.

.div1 > p {color:red;} .div2 > p {color:red;} .div3 > P {color:red;} Advanced version

As more code is written, beginners gradually find that there is a lot of common code that can be extracted. For example, the color:red here can be extracted. Wow, the code has been reduced a lot in an instant!

.div1 > precar.div2 > preco.div3 > P {color:red;} Premium version (: is)

At this time, the novice felt that since color:red; could be proposed, why didn't p bring it up? As a result, a more concise version appears below.

: is (.div1, .div2, .div3) > P {color:red;}

Example 2 specific element: is

Looking at the following code, we want to implement that the color of div is red, and the color definition is in textColor, and keep p black.

P1 p2 p3p4

Looking at example 1 above, I guess some beginners will start to write like this: directly add a new style to the p tag.

: is (.textColor) {color:red;} .pColor {color: black;} p4

But: is supports the writing of specific elements: you just need to add it before: is

Div:is (.textColor) {color:red;}

Multiple: isdiv:is (.textColor): is (h _ 2jinh _ 5) {color:red;} h _ 2 h _ 3 h _ 4 h5

Weight

The weight of is is determined by the selectors provided, such as id, elements, and so on; it may be difficult to understand. An example will be understood immediately.

Li1 li2

Let's change the font color of li.

: is (ol) li {color: red;} ol li {color: blue;}

You can guess what color it is.

Is blue: why, first of all, the argument to is is that ol is the same weight as the ol selector below. And because the blue is below, the browser automatically overrides the red with blue.

Looking at the following writing, we add an id: # olID to the parameter of is, and the final color is red. This is because is uses a heavier id selector.

: is (ol,#olID) li {color: red;} ol li {color: blue;}

: where

The syntax parameters of where and: is are exactly the same. The only difference is that the weight of where is always zero, or the most humble. It's the same example as above.

Li1 li2

Here we:

: where (ol,#olID) li {color: red;} ol li {color: blue;}

The final result is blue.

Application scenario

Because to say, since there is is, why do you want to: where? Personally, I think: where is still very useful. For example, in the development of component libraries, can be used, because the weight of where is very low, then users are not easy to cover, do not need anything! imprtant,v-deep and so on.

About CSS: is () and: where () how to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.