Css3 selector weight (Part 1), css3 Selector

Css3 selector weight (Part 1), css3 Selector

 

In fact, the notes I have written in these blog posts are the notes I wrote when I learned a long time ago, but I didn't have the habit of writing a blog before, so I wrote them all when I needed them in Word documents. I have just opened a blog recently, so I want to post my notes to my blog.

But now it seems that many of my notes are too basic. In fact, it does not play a major role in blog, so I want to re-write some interesting cases I encountered during development and my notes.

If you want to introduce the css selector, you will certainly encounter a problem, that is, the weight problem. Therefore, this blog is divided into three parts, the first part describes in detail the current css selector usage, the second part introduces the weight issue, and the third part is some interesting cases I encountered during development.

Part 1: css selector Introduction

1. Descendant Selector

 

Selector	Example	Example description	Css
Element	Div p	Select <div> all <p elements>	1
Element> element	Div> p	Select the parent element as <div> all child of the element <p>.	2
: Only-child	P: only-child	Matches a unique <p> element in the parent element. If the parent element contains other elements, it will not be matched.	3
: Nth-child (n)	P: nth-child (2)	Match the first <p> child element in the parent element. n can be a number, a keyword, or a formula. Odd and even are child elements that can be used to match an Odd or even number of subscripts. The subscript of the first child element is 1.	3
: Nth-last-child (n)	P: nth-last-child (2)	Same as above, but starts counting from the last child element.	3
: First-child	P: first-child	Select each <p> element of the first child element of the parent element. The first child element must be p	3
: Root	: Root	Select the document root element	3
: Empty	P: empty	Select each <p> element without child elements (including text nodes)	3

The first-child selector is the first-child selector. Because I have made such a mistake in the early stage, I have some misunderstandings about this selector. Later I discovered this pitfall after practice. This tag must meet two conditions at the same time: 1. The sub-element contains the tag you selected 2. The sub-tag you selected must be the first sub-tag.

Let me give you an example to understand this.

Result on the right

We can see that the p tag under the div is also the first p tag. Here we should be clear that the first p tag is not the first sub-tag, and the tag is the first sub-tag. So now the: first-child selector is valid.

: The only-child option must also meet two conditions.

2. Peer Selector

 

Selector	Example	Example description	Css
Element + element	Div + p	Select the <p> element next to the <div> element	2
Element ~ Element2	P ~ Ul	Select each <ul> element with <p> element	3
: First-of-type	P: first-of-type	Match the first <p> element in the sibling Element	3
: Last-of-type	P: last-of-type	Match the last <p> element in the sibling Element	3
: Only-of-type	P: only-of-type	Matches the p element with only one sibling element of the same type.	3
: Nth-of-type (n)	P: nth-of-type (2)	Matches the nth sibling element p of the same type	3
: Nth-last-of-type (n)	P: nth-last-of-type (2)	Same as above, but count from the last one	3

+ AND ~ Difference

Div + p selects the sibling tag, that is, the p tag followed by the div. This p tag satisfies the requirements and is the sibling tag of the div, that is, followed by the div, there are no other labels between the two.

Running result on the right

As you can see, when the + selector is used, the font of the first p tag after tag a becomes red. And ~ The selector is used to select the tag that satisfies the preceding p tag (the p tag is not necessarily followed by the tag)

3. Pseudo-class selector

 

Selector	Example	Example description ·	Css
: Link	A: link	Select All unaccessed links	1
: Visited	A: visited	Select All accessed links	1
: Active	A: actied	Select activity Link	1
: Hover	A: hover	Select the link on which the mouse pointer is located	1
: Focus	Input: focus	Select the input element for getting focus	2
: First-letter	P: first-letter	Select the first letter of each <p> element	1
: First-line	P: first-line	Select the first line of each <p> element	1
: Before	P: before	Insert content before the content of each <p> element	2
: After	P: after	Insert content after the content of each <p> element	2
: Target	# News: target	Select the # news element of the current activity	3
: Root	: Root	Select the document root element	3

Some pseudo-class selectors are css selectors with behavior changes. In fact, these selectors are very useful. Even it can replace some js event operations. For example, hover, active, and focus selectors can be used to replace js events. In addition, we usually use the following: after and: before pseudo-class selectors. These two options are very unique. You can add an element to the tag of your choice without affecting other elements of the document. Insert it in the selected tag. In addition, the row element is inserted. These two pseudo-class selectors are often used in the development process to do something interesting. In the following cases, I will use this pseudo-class selector.

4. Attribute Selector

Attribute selector is a good filter selector. during the development process, we often encounter some identical labels that display different states. In this case, we can use the attribute selector to differentiate them.

 

 

Selector	Example	Example description	Css
[Attribute]	[Target]	Select all elements with the target attribute	2
[Attribute = value]	[Tar = _ blank]	Select all elements of target = "_ blank"	2
[Attribute ~ = Value]	[Title ~ = Flower]	Select all elements whose title attribute contains the word "flower"	2
[Attribute | = value]	[Lang | = en]	Select all elements whose lang attribute value starts with "en"	2
[Attribute ^ = value]	A [src ^ = "https"]	Select each <a> element whose src attribute value starts with "https ".	3
[Attribute $ = value]	A[src000000000000"]	Select all <a> elements ending with "srcend"	3
[Attribute * = value]	A [src * = "abc"]	Select each <a> element whose src attribute contains the "abc" substring.	3

For example, when we see a file to be downloaded, some link icons will differentiate the types of these files, that is, different types of files will display different icons ), this attribute can be easily used.

The figure below shows the running result.

5. ui pseudo-class selector

Selector	Example	Example description	Css
: Enabled	Input: enabled	Select each enabled <input> element	3
: Disabled	Input: disabled	Select each disabled <input> element	3
: Checked	Input: checked	Select each selected <input> element	3
: Not (selector)	: Not (p)	Select each element of a non-<p> element	3
: Selection	: Section	Select selected elements	3

This is all the selectors to be introduced in the first part.