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 include E[att^=value], E[att$=value] and E[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

[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-typep:first -of-typeSelects the first element of which each p:last-of-type

The

p:only-of-type

##:only-childp:only-childSelect 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 parentnp:nth-last-child(2)3np:nth-of-type(2)

)p:nth-last-of-type(2)Select each element of its parent, counting from the last childp:last-childSelects each

element that is the last child of its parent. 3

element that does not have any children (including Text node) 33333selectorSelect every not

33<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 parent 3
< ;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

pSelect all1##element,elementselect allelement1##element elementelement>element2# #elementelementattribute[target]attributevalue]attributevalue]attributelanguage]Select all unvisited linksSelect all visited linksSelect active linkSelect When the mouse is over the linkSelect the input element with focus::first-letterSelect each The first letter of a

element

p:first-line##: :first-child:Specifies that the

element is the first child of its parent only style.

::before: Insert content before each

element

::after:Insert content after each

element

::lang(Select all

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

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

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>pSelect all elements whose parent is a element
div pSelect all elements immediately following the element2		[	]
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!