What does css selector mean?

In CSS, the selector is a mode for selecting elements that need to be styled; the css selector specifies the object of the css style, that is, which elements in the web page the "style" acts on, the syntax format "selector" {style}". Elements in HTML pages are controlled through CSS selectors.

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

In CSS, a selector is a mode for selecting elements that need to be styled.

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.

Each css style definition consists of two parts, the form is as follows: [code] Selector {style} [/code] The part before {} is the "selector". The "selector" specifies the object of the "style" in {}, that is, which elements in the web page the "style" acts on.

What selectors are there in css

p.introSelect all with class="intro"

element.

##elementelement##element>elementelement~element2[][target][=value][~=value][|=value][^=value][$=value][*=value]:activea:activeSelect the active link. ::afterp::afterInsert content after the content of each

.

::beforep::beforeInsert content before the content of each

.

:checkedinput:checkedSelects each selected element. :defaultinput:defaultSelect the default element. :disabledinput:disabledSelect each disabled element. :emptyp:empty Selects every

element (including text nodes) that has no child elements.

:enabledinput:enabledSelects each enabled element. :first-childp:first-child Selects each

that is the first child element of the parent element element.

::first-letterp::first-letterSelects the first letter of each

element.

::first-linep::first-lineSelects the first line of each

element.

:first-of-typep:first-of-typeSelects the first

element that belongs to its parent element for each

element.

:focusinput:focusSelect the input element that gets focus. :fullscreen:fullscreen Select an element that is in full screen mode. :hovera:hoverSelect the link the mouse pointer is over. :in-rangeinput:in-rangeSelects input elements whose values ​​are within the specified range. :indeterminateinput:indeterminateSelect input elements that are in an indeterminate state. :invalidinput:invalidSelects all input elements with invalid values. :lang()p:lang(it)

Selector	Example	Example description
.class	.intro	Select all elements with class="intro".
.class1.class2	.name1.name2	Select the class attribute that also contains All elements of name1 and name2.
.class1 .class2	.name1 .name2	Select as the class name name1 element Descendants of all classname name2 elements.
#id	#firstname	Select the element with id="firstname".
*	*	Select all elements.
element	p	Selects all elements.
##element.class
,elementdiv, p	Select all elements and All elements.
elementdiv p	Select all < within the element ;p> element.
element##div > pSelect the parent element is < All elements within a div>.
##div pSelect the first element immediately following elements.		element1
p ~ ulSelect the element preceded by for each element.		attribute
Selects all elements with the target attribute.		attribute
[target=_blank]Select with target All elements with the ="_blank" attribute.		attribute
[title~=flower]Select title The attribute contains all elements with the word "flower".		attribute
[lang|=en]Select lang All elements whose attribute value starts with "en".		attribute
a[href^="https"]Select every element whose src attribute value starts with "https".		attribute
a[href$=".pdf"]Select all elements whose src attribute ends with ".pdf".		attribute
a[href*="w3schools"]Select each element whose href attribute value contains the "abc" substring.
		language
Select the lang attribute equal to "it" (Italian ) for each element.
:last-child	p:last-child	Selects each element that is the last child element of its parent element.
:last-of-type	p:last-of-type	Selects the last element that belongs to its parent element Each element.
:link	a:link	Select all unvisited links.
:not(selector)	:not(p)	Select each element that is not a element.
:nth-child(n)	p:nth-child(2)	Select the element that belongs to its parent The second child of each element.
:nth-last-child(n)	p:nth-last-child(2)	Same as above , counting from the last child element.
:nth-of-type(n)	p:nth-of-type(2)	Select Each element that belongs to the second element of its parent.
:nth-last-of-type(n)	p:nth-last-of-type(2)	Same as above, but start counting from the last child element.
:only-of-type	p:only-of-type	Select the only element that belongs to its parent element Each element.
:only-child	p:only-child	Selects each element that is the only child element of its parent element .
:optional	input:optional	Select input elements without the "required" attribute.
:out-of-range	input:out-of-range	Select input elements whose values ​​exceed the specified range.
::placeholder	input::placeholder	Select the input element that has the "placeholder" attribute specified.
:read-only	input:read-only	Select the input element that has specified the "readonly" attribute.
:read-write	input:read-write	Select input elements that do not specify the "readonly" attribute.
:required	input:required	Select the input element that has the "required" attribute specified.
:root	:root	Select the root element of the document.
::selection	::selection	Select the part of the element that the user has selected.
:target	#news:target	Select the currently active #news element.
:valid	input:valid	Selects all input elements with valid values.
:visited	a:visited	Select all visited links.

(Learning video sharing: css video tutorial)

The above is the detailed content of What does css selector mean?. For more information, please follow other related articles on the PHP Chinese website!