css notes-detailed explanation of selectors_html/css

css notes-detailed explanation of selectors_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:12

Original

1148 people have browsed it

css notes - detailed explanation of selectors

CSS uses selectors to locate elements to which styles are to be applied.

The following is an explanation of all selectors (CSS is the version number).

Detailed explanation of CSS selectors Selector examples Example description CSS

.class	.intro	Select class="intro" of all elements.	1
#id	#firstname	id="firstname" for all elements.	1
*	*	Select all elements.	2
element	p	Selects all elements.	1
element,element	div,p	Select all elements and all element.	1
element element	div p	Selects all elements inside a element.	1
element>element	div>p	Select all< whose parent element is p> element.	2
element element	div p	Selects all element ; element.	2
[attribute]	[target]	Selects all elements with the target attribute.	2
[attribute=value]	[target=_blank]	Select all elements with target="_blank" .	2
[attribute~=value]	[title~=flower]	Select the title attribute containing the word "flower" " all elements.	2
[attribute\|=value]	[lang\|=en]	Select the lang attribute value with "en " All elements starting with ".	2
:link	a:link	Select all unvisited links.	1
:visited	a:visited	Select all visited links.	1
:active	a:active	Select an active link.	1
:hover	a:hover	Select the link the mouse pointer is on.	1
:focus	input:focus	Select the input element that gets focus.	2
:first-letter	p:first-letter	Select the first of each element letter.	1
:first-line	p:first-line	Select the first of each element OK.	1
:first-child	p:first-child	Select the first child element that belongs to the parent element for each element.	2
:before	p:before	Insert content before the content of each element.	2
:after	p:after	Insert content after the content of each element.	2
:lang(language)	p:lang(it)	Select starting with "it" The lang attribute value of each element.	2
:first-of-type	p:first-of-type	Selects elements that belong to its parent Each element after the first element.	3
:last-of-type	p:last-of-type	Selects elements that belong to its parent Each element of the last element.	3
:only-of-type	p:only-of-type	Select only elements belonging to its parent of elements for each element.	3
:only-child	p:only-childp	Selects the only child element that belongs to its parent element Each element.	3
:nth-child(n)	p:nth-child(2)	Select belongs to its parent Each element that is the second child of the element.	3
:nth-last-child(n)	p:nth-last-child(2)	Same as above, counting from the last child element.	3
:nth-of-type(n)	p:nth-of-type(2)	Selects each element that is the second element from its parent.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	Same as above, but counting from the last child element.	3
:last-child	p:last-child	Select the last child element belonging to its parent element elements.	3
:root	:root	Select the root element of the document.	3
:empty	p:empty	Selects every element that has no child elements (including text node).	3
:target	#news:target	Selects the currently active #news element.	3
:enabled	input:enabled	Selects each enabled element.	3
:disabled	input:disabled	Select each disabled element.	3
:checked	input:checked	Selects each selected element.	3
:not(selector)	:not(p)	Select every element that is not elements.	3
::selection	::selection	Select the part of the element selected by the user.	3

These are the CSS selectors.