preface

This time in the arrangement of knowledge points related to the interview questions, to check the gaps, and then their knowledge points for CSS selector this part of the knowledge just have some understanding, so this time specifically comb the CSS selector knowledge points. Let’s start with a few questions that interviewers often ask

First question: What is a CSS selector

As we all know when we write pages, the various styles of HTML page attributes are implemented through CSS. To use CSS for one-to-one, one-to-many, or many-to-one control of elements in an HTML page, you need CSS selectors. Elements in HTML pages are controlled by CSS selectors.

A complete CSS property selector is made up of CSS named properties and their values, with the selector before {}, as shown below.

.head {
  color:#fff
}
Copy the code

Second question: what are CSS selectors

CSS has five major selectors, namely wildcard selectors, element/label selectors, class selectors, ID selectors, and attribute selectors

Wildcard selector

In fact, the wildcard selector, which we often use in open pages, is the same as the *, and when the * is used as a selector, it matches all elements in HTML, such as the wildcard selector we often set on pages below

* {
  margin:0;
  padding:0;
}
Copy the code

The above selector sets the margin and padding values of all elements in the browser to 0

The wildcard selector can also be used to select all elements under an element. The following code selects all elements under the head class of div and sets the background color of these elements to red

<style>
    div.head * {
      color: red;
    }
</style>
<div class="head">
    <p>I'm wildcard number one</p>
    <p>I'm wildcard number two</p>
</div>
Copy the code

Element selector

Element selectors are pretty much our most common selectors, and in HTML documents they usually refer to some HTML element

h3 {
    color:blue; } <h3> I am an element selector </h3>Copy the code

The code above selects all span elements and sets their content color to blue, as well as many others such as P, H2, A,div and even HTML.

Class selector

Class selectors are divided into two types, single-class selectors and multi-class selectors

Single-class selector

While it may not be subtle enough to use the element selector directly to manipulate elements, we can use the class selector to style the classes within the element directly. Single-class selectors are used by adding the. Class name to the element name, as shown below

h3.one {
  color:yellow;
}
<h3 class="one"> I am a single-class selector </h3>Copy the code

When the prefix of the class name is long, we can also omit, directly use the class name to select

.one {
  color:yellow;
}
<h3 class="one"> I am the ellipsis of the single-class selector </h3>Copy the code

Multiclass selectors

In practical development, the class name in an element might not be a single word, but a long list of words separated by Spaces. Before explaining multiple class selectors let’s consider a situation where a single class selector occurs.

When your class name contains two or more words, say class=”first study”, First {color=”white”}. Study {font size:10px}. The first {color=”white”}. So the final content will show both styles.

Now, let’s look at the multi-class selector. When we want to style the third p tag directly, we can set two constraints on the class name,.first.study, and the class name can use styles as long as it has these two words, regardless of word order. Because writing.study. First works the same way. We can combine an element selector with a multi-class selector, prefixed by the element name to match the specified class name of the specified element, such as h4.first.study

.first {
  color:blue
}
.study {
  color:green
}
.first.study {
  color:pink
}
<h4 class="first"I am a multi-class selector1</h4>
<h4 class="study">I'm multiclass selector 2</h4p>
<h4 class="first study">I'm multiclass selector 3</h4>
Copy the code

ID selector

Just looking at the code, we might think that ID selectors are similar to class selectors, so why do we need ID selectors when we have class selectors? An element can have multiple classes, but only one unique ID. An ID value can be set only once in the entire HTML, and cannot be set repeatedly. Therefore, ID value is also the unique value of an element. When we want to perform different operations on several elements of the same name, we need to use the ID selector

The ID selector is written as # + ID value

#one {
  color:blue
}
#two {
  color:yellow
}
#three {
  color:red
}
<h5 class="first" id="one"> I am the ID selector1</h5>
<h5 class="first" id="two">I'm ID selector 2</h5>
<h5 class="first" id="three">I'm ID selector 3</h5>
Copy the code

As you can see from the figure, we use the ID selector to set different colors for several elements with the same element name and the same name

Property selector

Attribute selectors allow you to directly select attributes in an element and then set the attributes of that element based on conditions

1. Simple property selectors

Make a selection based on a specific attribute in an element using either the element name [attribute name] or *[attribute name]. Here is an example of selecting all h2 tags with href attributes

a[href] {
  color:red
}
<a href="">www.baidu.com</a>
Copy the code

As with multi-class selectors, we can also set multiple property selection conditions, such as a[href][title]

a[href][title] {
  color:red
}
<a href="" title="">www.baidu.com</a>
Copy the code

2. Specific attribute value selector

www.baidu.com It’s important to note that the selector does a sequential search for the value of the specific attribute, essentially matching the substring, For example, a[href=”.baidu.com WWW “] cannot be matched. For example: a[href=”www.baidu.com”][title=”0000″] select the element whose href attribute is www.baidu.com and title attribute is 0000

3. Partial attribute value selector

As you can see, using specific attribute matching makes selection tedious and redundant, because with such a fine match for elements, why don’t I consider ID selection? In fact, we tend to deal more with selecting elements where a keyword appears in a string of attribute values. For example, we need to select the h1 element h1[class~=second] for all attribute names that contain second, where ~ contains the following string match

h1[class~=second] {
  color:pink
}
<h1 class="second 1"> I am a partial property value selector1</h1>
<h1 class="second 2">I'm part property value selector 2</h1>
<h1 class="second 3">I'm part property value selector 3</h1>
Copy the code

Small extension: When you select the class property, you’ll find that the same effect can be achieved using the class selector. Second

Class =”second1 “=”second1” =”second1 “=”second1” =”second1 “=”second1” =”second1 “=”second1″ =”second1”

H2. class^=”second”, matches the h2 element starting with the attribute value second
H2. Class $=”second”, matching the h2 element ending with the attribute value second
H2. class*=”second”, matches the h2 element that contains the attribute value second

h2[class^=second] {
  color:pink
}
h2[class$=second] {
  color:pink
}
h2[class*=second] {
  color:pink
}
<h2 class="second-1"> I am a partial property value selector3</h2>
<h2 class="2-second">I am partial attribute value selector 4</h2>
<h2 class="1-second-2">I'm part property value selector 5</h2>
Copy the code

Some of the property selectors are so powerful that we can even, if we want to, h2.class*=”s” for all property values second

supplement

Merge option

When two selectors have the same style, we can combine the two selectors

<style type="text/css"> p, div { ... } <! </style> <p> p ~ <p><div> div ~ </div>
Copy the code

Child selectors

When we want to select a subclass of an element, we can use > to select it, but note that the child selector can only select its own subclass, the second-level element, not elements below the second level.

p > strong {
 color: greenyellow; <! } <p><strong>Introductory tutorial</strong>
</p>
Copy the code

Descendant selector

Descendant selectors can select elements up to several levels inside an element, as long as the element below the element, no matter how many levels, can be selected. This is where it differs from a subclass selector, which can select multiple levels of elements, while a subclass selector can select only two levels of elements

div p { <! Div strong {<! -- Select strong element successfully -->} <div><p><strong>Descendant selector</strong></p>
</div>

Copy the code

Subclass filter

When we use the subclass selector, we can use the subclass filter to filter the subclass elements based on the criteria

<style type="text/css"> p:first-child { ... } <! -- Select the first p --> p: NTH -child(2){... } <! P --> p:last-child {... } <! </style><p> p1 ~ </p>
<p> p2 ~ </p>
<p> p3 ~ </p>
Copy the code

Pseudo class selector

Pseudo-class selector: we can use it when we want to implement different states for the same tag to display different styles, the most common is the use of hyperlink states. Div, for example, is in the Box class, and that’s pretty clear, it’s in the box class. But what class does A belong to? Not clear. Because you need to see what state the user is in before clicking, and what state the user is in after clicking. So, they’re called pseudo-classes.

Pseudo class is divided into static pseudo class and dynamic pseudo class

Static pseudo class

Static pseudo-classes can only be used for hyperlinked styles

:link hyperlink before clicking
After the link has been visited

Dynamic pseudo class

Dynamic pseudo-classes work for all tags

:hover: when the mouse is placed over a label
: Active: Click on a label without releasing the cursor.
Focus is what a label looks like when it gets focus (for example, an input field gets focus)

Four states of hyperlinks

A label has four pseudo-classes (corresponding to four states), which must be discharged in sequence. As follows:

Hyperlink: Before a hyperlink is clicked
After the link has been visited
:hover: when the mouse is placed over a label
: Active: Click on a label without releasing the cursor.

/* Make the hyperlink yellow */ before it clicks
		a:link{
			color:yellow;
		}

		/* Make the hyperlink blue */
		a:visited{
			color:blue;
		}
		/* Hover over the label */
		a:hover{
			color:pink;
		}
		/* When the mouse clicks on the link, but does not let go */
		a:active{
			color:black;
Copy the code

Here is the code for the example

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta "> <title>Document</title> <style> div. Head * {color: RGB (51, 51, 51); red; } h3 { color: blue; } h3.one { color: yellow; } .second { color: burlywood; } .first { color: blue } .study { color: green } .first.study { color: pink } #one { color: blue } #two { color: yellow } #three { color: red } a[href] { color: red } a[href="www.baidu.com"] { color: black } h1[class~="second"] { color:pink } h2[class^="second"] { color:pink } h2[class$="second"] { color:pink } H2 [class*="second"] {color:pink} </style> </head> <body> <div class="head"> <p> <hr> <div> <h3> I am an element selector </h3> </div> <hr> <div> <h3 class="one"> I am a single class selector </h3> <h3 class="second"> I am a single class selector </h3> </div> <hr> <div> <h4 class="first"> I am a multi-class selector 1</h4> < H4 class="study"> I am a multi-class selector 2</h4> <hr> <div> <h5 class="first" id="one"> </h5> < H5 class="first" id="two"> </h5> <h5 class="first" Id = "three" > I am id selector 3 < / h5 > < / div > < hr > < div > < a href = "" title =" "> www.baidu.com < / a > < br > < a Href ="www.baidu.com">www.baidu.com</a> </div> <hr> <div> <h1 class="second 1"> I am the partial attribute value selector 1</h1> < H1 class="second 2"> I am a partial attribute value selector 2</ H1 > < H1 class="second 3"> I am a partial attribute value selector 3</ H1 > </div> <hr> <div> <h2 class="second-1"> I am a partial attribute value selector 3</h2> <h2 Class ="2-second"> I am partial attribute value selector 4</h2> <h2 class="1-second "> I am partial attribute value selector 5</h2> </div> </body>Copy the code

Above, is the understanding and understanding of all kinds of selectors, we are going to start to introduce the highlight is often asked by the interviewer test point – the priority of the selector

Third question: what is the priority of the selector? How do they compute?

Recognition of selector priority

CSS selectors include inline styles, ID selectors, class selectors, and tag selectors. The priority of the above several selectors is successively reduced, in addition, in the selector used! Important increases the priority of the selector. Why do we introduce the concept of priority to selectors? Imagine if we have a P tag ID selector set up red, for its class selector set up yellow, its element selectors set up blue, then P tag color is not to fight, so we need to set the priority of the selector, which is a higher priority, which is executed selector.

To compare the priority of the selectors, we assign weights to each selector

! The impotant weight is plus infinity
The inline style weight is 1000
The ID selector weight is 100
Class selectors/pseudo-class selectors/attribute selectors have a weight of 10
The label selector weight is 1
The wildcard selector/subclass selector/sibling selector has a weight of 0
Inherited styles have no weight

Summary: summary sort:! Important > Inline Style >ID selector > Class selector > Tags > Wildcards > Inheritance > Browser default properties

Comparison rules for selectors

A selector with a high weight takes precedence over a selector with a low weight
Weights can be superimposed, such as a main class with a P tag:.main P {} Where the selector has a weight of 11
With the same weight, select the later selector to overwrite the previous style
Wildcards, child selectors, and sibling selectors have weights of 0000, but their weights are higher than those of inherited styles

Here is an example to visualize the selector weights

example

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> <style> * {/* 0 */ margin: 0; padding: 0; }. Container {/* class selector 10 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #study {/* ID selector 100 */ color: black; }. Head {/* class selector 10 */ color: blue; } p {/* element selector 1 */ color: violet; }. Head p {/* class selector 10 + element selector 1 = 11 */ color: orangered; }. Head p[class="one"] {/* saddlebrown: saddlebrown; } div. Head p[class="two"] {/* float: left; float: left; float: left; float: left; } div. Head p[class="three"] {float: left; float: left; float: left; float: left; } div. Head p[class="four"] {/* float: left; color: RGB (176, 45, 180); } .five { /* ! Word-wrap: break-word! Important infinity */ color: RGB (82, 162, 228)! important; } </style> </head> <body> <div class="container"> <div class="head" id="top"> <p style="font-size: 20px; color: rgb(9, 87, 48);" Id ="study"> < / p > < p class = "one" > Monday to play king < / p > < p class = "two" > on Tuesday to play LOL < / p > < p class = "three" > on Wednesday to eat chicken < / p > < p class = "four" > Thursday to play the original god < / p > < p Class = "five" > Friday Onmyoji < / p > < p > the weekend steam buckets of < / p > < / div > < / div > < / body > < / HTML >Copy the code

Analysis of the

We can see from above

I’m going to study!

Its color is selected by the #study,.head, p,.head P selectors and inline styles. Since inline styles have the highest weight of 1000, the inline styles are executed

Play Kings on Monday

Its color, selected by the selectors #study,.head, p,.head p,.head p[class=”one”], executes its style since.head p[class=”one”] has a weight of 20, the highest.

The same for all the other elements

Add: There is an unbridgeable gap between the different selectors, that is, the weight of 11 label selectors is less than one class selector

summary

Above, is the CSS selector priority comparison, this article summarizes what is CSS selector, CSS selector and the priority comparison between various selectors, through the preliminary understanding of CSS selector step by step in-depth priority comparison, to help you better understand CSS selector, If you think it will help you, please like it. Of course, due to my limited level, there may be a lot of mistakes in the article. I hope you can point out the problems in the comment section

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Interview CSS selector? This one is enough

preface

First question: What is a CSS selector

Second question: what are CSS selectors

Wildcard selector

Element selector

Class selector

Single-class selector

Multiclass selectors

ID selector

Property selector

1. Simple property selectors

2. Specific attribute value selector

3. Partial attribute value selector

supplement

Merge option

Child selectors

Descendant selector

Subclass filter

Pseudo class selector

Third question: what is the priority of the selector? How do they compute?

Recognition of selector priority

Comparison rules for selectors

example

Analysis of the

summary

Interview CSS selector? This one is enough

preface

First question: What is a CSS selector

Second question: what are CSS selectors

Wildcard selector

Element selector

Class selector

Single-class selector

Multiclass selectors

ID selector

Property selector

1. Simple property selectors

2. Specific attribute value selector

3. Partial attribute value selector

supplement

Merge option

Child selectors

Descendant selector

Subclass filter

Pseudo class selector

Third question: what is the priority of the selector? How do they compute?

Recognition of selector priority

Comparison rules for selectors

example

Analysis of the

summary

Related Posts

Do you really understand the MVC,MVVM design pattern?

【 Front-end skills 】【 Web scrolling 】

From IFrame to microfront-end practices