Detailed introduction and usage summary of CSS3 selector

CSS3 has added a lot of powerful selectors

It allows us to write fewer JS event scripts
Let's take a look at what the different versions of selectors are
Note:
Ele represents element elements
attr represents the attribute property, and Val represents the value of the Values property
: XXX are pseudo-class selectors,:: XXX are pseudo-element selectors
I try to break down the name selector.

CCS1 Selector

Selector

Selector	type	Example	Description
. class	Class Selector	. demo	Select all the elements of the class containing the demo
#id	ID Selector	#unique	Select all elements with a unique ID
Ele	Element Selector	P	Select all P elements
Ele,ele	Parallel selector	H1,h2	Select all H1 elements and H2 elements
Ele ele	Descendant Selector	P p	Selects all P elements within the P element
: Link	Pseudo class Selector	A:link	Select the Not visited link
: Visited	Pseudo class Selector	a:visited	Choose to visit a link
: Active	Pseudo class Selector	A:active	Select Active link
: hover	Pseudo class Selector	A:hover	Select mouse Hover link
:: First-letter	First letter Selector	P:first-letter	Select the first letter of each P element
:: First-line	First row selector	P:first-line	Select the first line of each P element

The CSS1 version has the classic selector we use most often
:: First-letter and:: First-line seems seldom used
In CSS2, they can only be used in block-level elements such as paragraphs, hyperlinks, and other inline elements that cannot be used.
CSS2.1,: First-letter can apply all elements
But the attributes they can use are still limited.
It is not listed here, after all, not used

Linked pseudo-class selectors (anchor pseudo-Class) we usually use this.

a:link {color:blue;}             /* Static Pseudo-class: Blue */a:visited {color:purple when no link is accessed;}        /* Static Pseudo-class: The visited link becomes purple */a:hover {color:red;}             /* Dynamic Pseudo-class: mouse hover over link to red */a:active {color:orange;}         /* Dynamic Pseudo-class: When the mouse button down the link becomes orange */

Link-visited-hover-active (LVHA) is the recommended order and will not overwrite the resulting conflict
Also very good remember "green Lvhua"

CSS2 Selector

Selector

Selector	type	Example	Description
*	A wildcard selector	*	Select all elements
Ele>ele	Direct child Element Selector	P>p	Select the parent is the P element of the P element
Ele+ele	Adjacent sibling element Selector	P+p	Select a P element next to the P element
[attr]	Property Selector	[Target]	Select an element with the target property
[Attr=val]	Property Selector	[Target=_blank]	Select the element that has the target property and the property value is _blank
[Attr~=val]	Property Selector	[Title~=demo]	Select the element that has the title attribute and contains the word "demo"
[Attr|=language]	Property Selector	[Lang|=en]	Select the element with the start value of the Lang property as En
: Focus	Focus Selector	Input:focus	Select the INPUT element with focus
: First-child	First sub-selector	P:first-child	Select the element whose parent is the first child of the P-element
:: Before	Pseudo element Selector	P::before	Inserting content before the P element
:: After	Pseudo element Selector	P::after	Inserting content after the P element
: lang (language)	Pseudo class Selector	P:lang (IT)	The start value of the Select Lang attribute is the P element of it

There are p+p adjacent sibling element selectors that need to be noted here
Select a P element that is next to the P element,
found that some sites and books are written in all P elements, but I have verified that it seems wrong

Title~demo is saying that the Title property contains the word "Demo", with a space-delimited word between attribute values
Like this, </img> it can be checked.
But </img> it's not possible to select

The language selector is not used.

:: Before and:: After pseudo element selector you want to add content, you need to use the Contents property

P::before {    content: "123";}

We use after a lot of time to clear the float

P::after {    content: "";    Display:block;    Clear:both;}

As to why it is not the scope of today's discussion (￣_,￣)

Pseudo-class and pseudo-elements

Pseudo-element selectors written as pseudo-class single colon no problem
However, the pseudo-class selector cannot select an element by using a double colon.

Here's the difference between pseudo-class and pseudo-elements .
Pseudo-Class My understanding is that an element reaches a state
State exists, changes style, state disappears, style disappears
Pseudo-elements should be said to be specific to the action element
I just can't tell if it's a single colon.

CSS3 Selector

Knocking so much is finally going to be a key place.
CSS3 adds a lot of powerful selectors to the fake selector as the main
CSS1 and CSS2 versions of selectors don't add up to much.
Let's see it together.

Selector

Selector	category	Example	Description
Ele~ele	Rear sibling Element Selector	P~p	Selects all P elements after the P element
[Attr^=val]	Property Selector	A[SRC^=HTTPS]	Select an element with the SRC attribute value beginning with HTTPS
[Attr$=val]	Property Selector	A[src$=\.pdf]	Select an element with the SRC attribute value ending in a. pdf
[Attr*=val]	Property Selector	A[src*=demo]	Select the value of the SRC attribute contains the substring of the demo element
: First-of-type	Pseudo class Selector	P:first-of-type	Select each P element to be the first P-element of its parent
: Last-of-type	Pseudo class Selector	P:last-of-type	Select each P element is the last P element of its parent
: Only-of-type	Pseudo class Selector	P:only-of-type	Select each P element to be the only P element of its parent
: Only-child	Unique child element Selector	P:only-child	Select each P-element to be the only child of its parent
: Nth-child (N)	Pseudo class Selector	P:nth-child (2)	Select each P-element is the second child of its parent
: Nth-last-child (N)	Pseudo class Selector	P:nth-last-child (2)	Select each P element is the second-to-last child element of its parent
: Nth-of-type (N)	Pseudo class Selector	P:nth-of-type (2)	Select each P element is the second P element of its parent
: Nth-last-of-type (N)	Pseudo class Selector	P:nth-last-of-type (2)	Selecting each P element is the second-to-last p-element of its parent
: Last-child	Pseudo class Selector	P:last-child	Select each P-element to be the last child of its parent
: Root	root element Selector	: Root	Select Document root Element
: Empty	Empty Tag Selector	P:empty	Select the P element without any child elements (including text nodes)
: Target	Target element Selector	New:target	Select the currently active #new element (the URL that contains the anchor name click)
: Enabled	Pseudo class Selector	Input:enabled	Select an INPUT element that is enabled
:d isabled	Pseudo class Selector	Input:disabled	Select the disabled INPUT element
: Checked	Pseudo class Selector	Input:checked	Select the selected INPUT element
: Not (selector)	Negative Selector	: Not (P)	Select an element that is not a P element
:: Selection	Highlight text Selector	:: Selection	Matches the part of the element that is selected by the user or is in the highlighted state
: Out-of-range	Pseudo class Selector	: Out-of-range	Select input elements that have values outside the specified interval
: In-range	Pseudo class Selector	: In-range	Select INPUT element with a value within a specified range
: Read-write	Read-Write Element selector	: Read-write	Select a readable and writable element
: read-only	Read-only element selector	: read-only	Select a read-only element with the ReadOnly property set
: Optional	Pseudo class Selector	: Optional	Select an optional INPUT element
: Required	Pseudo class Selector	: Required	Select the element that has the required property set
: Valid	Legal element Selector	: Valid	Select elements that are valid for input values
: invalid	Illegal element Selector	: invalid	Select an element with an invalid input value

Property Selector

[Attr^=val],[attr$=val],[attr*=val] These three attribute selectors are put together in a note
Also very good to remember, very much like our regular expression in the beginning of the match ^, end match $, wildcard match *
It is also different from the CSS2 [Attr~=val]

<p class= "Demo demo1" >1</p><p class= "demo Demo2" >2</p><p class= "demo Demo3" >3</p >

[class^=de]You can select three rows, because their class properties are all preceded by a "de"
[class$=o2]You can select the second row, because only its class attribute is the end of "O2"
[class*=em]You can also select three rows, because their class contains the string "em"
[class~=de]You cannot select any row because it does not have a property value of "De" in a space-delimited property value in class

Speaking of this property selector, I'd like to say a little more.
The example I wrote in the table is this. a[src$=\.pdf]
is because "." It does not know, we need to add "\" escape
But the property selector in CSS can also be written in quotation marks.
For example, the following code is equivalent
a[src$=\.pdf]
a[src$=".pdf"]
a[src$='.pdf']

Child element Selector

The following bunch of what type, child selectors are for the position of the sub-element in the parent element
It's detailed in the table.
I mainly talk about the difference between type and child,
Take the simplest: First-child and: First-of-type as an example

<p>0</p><p>1</p><p>2</p><p>3</p>

p:first-child{    background-color:red;}

Using First-child we found that the page did not change
This is because P is not the first child element of a BODY element

p:first-of-type{/* change */    background-color:red;}

Instead of First-of-type, we found the first p turned red.
This is because it is the first of all p in the child element of the BODY element

The rest is the same, extrapolate.

root element Selector

: Root This selector is not interesting, just like you use HTML directly

: Root {...} HTML {...}

Empty element Selector

: Empty is to choose the real null element, there is no child element inside, the text node can not have
As an example,

<p></p><p>1</p><p>2</p><p>3</p>

P:empty::before {    content: "12345";    Background-color:gold;}

Target element Selector

This: The target selector has some meaning.
Write an example

<a href= "#first" >1st</a><br><a href= "#second" >2nd</a><br><a href= "#third" >3rd</a><br><a href= "#fourth" >4th</a><br><a href= "#fifth" >5th</a> <br><br><br><br><br><br><p id= "First" >1</p><p id= "Second" > 2</p><p id= "Third" >3</p><p id= "fourth" >4</p><p id= "fifth" >5</p>

body {    height:2000px;} p {    width:200px;    height:200px;    font:200px/200px Bold;}

This is a small demo can use the anchor point in the page to jump
Click the link to jump to the corresponding ID element, and the URL link has changed

This will trigger: Target's style
Let's give it a try and add a few lines of code

p:target {    background-color:deeppink;}

Then click on the link

We found that, while jumping, the P-style changed

Highlight text Selector

:: Selection is a new selector for CSS3
It is used to match the highlighted text (select text with the mouse)
The browser has a default style (background is blue, font is)

<p>this is a long long text...</p>

p::selection{    Color:white;    Background-color:dodgerblue;}

The default browser style is the equivalent of this, we can modify the

Negative Selector

: Not () This selector can exclude elements of certain conditions
For example, we can use this.

<p class= "Demo" >1</p><p>2</p><p>3</p>

P:not (. Demo) {    Background-color:aqua;}

The elements in the class attribute that have a demo will not change color

CSS Small Chart

The rest of the selectors are mostly for input tags.
I'm not talking about it.
We do a little exercise, just using the CSS3 selector to do a click button to toggle the picture of the small chart
Display different pictures by clicking the Radio box
Like this

First we need to write the HTML code
Use of three radio and three IMG elements

<input type= "Radio" Name= "demo" id= "a" checked><input type= "Radio" Name= "demo" id= "B" & Gt;<input type= "Radio" Name= "demo" id= "C" >

The CSS section then controls the display of the IMG element by: checked mate condition Selector

input {    margin-left:35px;} IMG {    display:none;}:checked+img {    position:absolute;    left:10px;    top:40px;    Display:inline-block;}

So we're done with our little chart function.

Sorting out the selector for the night, there may be omissions
If you think about it, make it up later.