What new selectors are added in css3

The new selectors in css3 are: ":first-of-type", ":last-of-type", ":last-child", ":root", ":empty", " :target", ":enabled", ":disabled", ":valid" and so on.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

To use CSS to achieve one-to-one, one-to-many or many-to-one control of elements in an HTML page, you need to use CSS selectors.

Elements in HTML pages are controlled through CSS selectors.

CSS selector is used to select the pattern of the element you want to style.

New selectors in css3

The new selectors in CSS3 are mainly divided into attribute selectors, relationship selectors, and structured pseudo- There are 4 categories of class selectors and pseudo-element selectors. The specific introduction is as follows:

1. Attribute selector

The attribute selector can be based on the attributes and attribute values of the web page mark. to select markers.

Attribute selectors mainly includeE[att^=value],E[att$=value]andE[att*=value]These three sex selectors.

2. Relationship selector

The relationship selector in CSS3 mainly includes descendant selector and sibling selector.

(1)Relationship selector

(2)Adjacent sibling selector

(3)Ordinary sibling selector

3. Structure Structured pseudo-class selector

The structured pseudo-class selector can reduce the definition of class attributes and id attributes in the document, making the document more concise.

4. Pseudo element selector

The pseudo element selector is generally a mark followed by an English colon ":", after the English colon is the pseudo element name.

css3 new selector list

The

[ attribute ##[ attribute $= Select each element whose src attribute value ends with ".pdf" 3 [ attribute *= Select each element whose src attribute value contains the substring "44lan" 3 :first-of-type p:first -of-type Selects the first element of which each p:last-of-type p:only-of-type ##:only-child p:only-child Select each The element is the only child element of its parent :nth-child( ) p:nth-child(2) element that is the second child element of its parent n p:nth-last-child(2) 3 n p:nth-of-type(2) ) p:nth-last-of-type(2) Select each element of its parent, counting from the last child p:last-child Selects each element that is the last child of its parent. 3 element that does not have any children (including Text node) 3 3 3 3 3 selector Select every not 3 3 < input > whose value is outside the specified range

Selector	Example	Example Description	CSS
# #element1~element2##p~ul	Select each ul element after the	element3
^=value]a[src^="https"]	Select each element whose src attribute value starts with "https"	3
value]a[src$=".pdf"]
value]a[src*="44lan"]
		element is its parent3	##:last-of-type
Select each	element is the last	element of its parent3	:only-of-type
Selects the only	element for which each	element is its parent3
< ;P>		3	n
Select each		3 ##:nth-last-child(	)
Selecting each element is the second child element of its parent, counting from the last child		:nth-of-type(	)
Select each< The P>element is the second	element of its parent	3##:nth- last-of-type( n
The element's is the second		3:last-child
	3	##:root :root	Select the root element of the document
	:empty	p:empty	Selects every
		:target #news:target	Select the currently active #news element (The clicked URL that contains this anchor name)
	:enabled	input:enabled	Select each Enabled input elements
	:disabled	input:disabled	Select each disabled input element
	:checked	input:checked	Select each selected input element
	:not(	)	:not(p)
Element of element		::selection ::selection	is selected by the user in the matching element Or the highlighted part
	:out-of-range	:out-of-range	Match
elements	3
:in-range	:in-range	Match values within the specified interval<input>Element	3
:read-write	:read-write	Used to match readable and writable elements	3
:read-only	: read-only	Used to match elements with the "readonly" attribute set	3
:optional	:optional	is used to match optional input elements	3
:required	:required	Used to match elements with the "required" attribute set	3
:valid	:valid	Used for matching The input value is a legal element	3
:invalid	:invalid	is used to match the input value is an illegal element	3

Extended knowledge: css1, css2 selector list

;element 1

> >

element

element is the first child of its parent only style.

element

element

elements with a starting value of lang attribute="it"

(Learning video sharing:css video tutorial,web front-end)

p Select all ##element,element select all 1 ##element element element > element 2 # #element element attribute [target] attribute value ] attribute value ] attribute language ] Select all unvisited links Select all visited links Select active link Select When the mouse is over the link Select the input element with focus : :first-letter Select each The first letter of a p :first-line ##: :first-child : Specifies that the ::before : Insert content before each ::after : Insert content after each ::lang( Select all

Selector	Example	Example description	CSS
.class	.intro	Select all elements with class="intro"	1
id	#firstname	Select all elements with id="firstname"	1
*	*	Select all elements	2
##element
##div,p
div pselect All elements	1
## within the element #div>p Select all elements whose parent is a element
div pSelect all elements immediately following the element 2		[	]
Select all elements with target attribute2		[	=
[target=_blank]Select all using target= Elements of "_blank"2		[	~=
[title ~=flower]Select all elements whose title attribute contains the word "flower"2		[	|=
[lang|=en]Select all elements with a starting value of lang attribute="EN"2		:link	a:link
1		:visited	a:visited
1		:active	a:active
1		:hover	a:hover
1		:focus	input:focus
2		::first-letter	p
	1	##::first-line	:
Select the first line of each element	1	p	:first-child
	2	p:	before
	2	p	:after
	2	language )	p:lang(it)
2

The above is the detailed content of What new selectors are added in css3. For more information, please follow other related articles on the PHP Chinese website!