001 CSS3 Selector list

1. The selector

   Version 1

   The selector	The sample	instructions
   class	.test{color: red}	Select the tag class=”test”
   id	#test{color:red}	Select the label with ID =”test”
   element	p{color: red}	Select all p tags
   element, element	div, p {}	Select all divs and p’s
   offspring element element	ul li {border: 1px solid red; }	chooseulAll of theliDescendants (including sons and grandchildren…)
   :link	a:link {color: black; }	Select all unvisited links
   :visited	a:visited {color: red; }	Select all visited links
   :hover	a:hover {color: #fff}	Mouse hover trigger
   :active	a:active {background: yellow; }	Select active link (hold mouse down without releasing trigger) (Note: In the CSS definition, :active must come after :hover!)
   :first-letter	h1:first-letter{font-size: 200%}	chooseh1In the first word
   :first-line	p:first-line {background: yellow}	Select each<p>The first row of the element

   Version 2

   The selector	The sample	instructions
   *	* {padding: 0; }	Select all labels
   Father and son element > element	.list > li {border: 1px solid red; }	chooseclass="list"All the sons ofli
   Brother element + element	h1+p {color: red}	inh1Pick one in the backpbrother
   attribute [attribute]	[type] {display: block; }	Choose to containtypeAttribute tag
   Attribute is equal to the [attribute=value]	[type=text] {display: block; }	choosetypeAttribute values fortextThe label of the
   Attribute contains [attribute~=value]	[eyes~= small eyes] {display:none}	Select all theeyesattributecontainsThe element of small eyes (<span style =" max-width: 100%; clear: both; min-height: 1em;)
   [attribute|=word]	[eyes | = “small eyes”] (often withattribute^=valueConfusion)	chooseeyesProperties forSmall eyesThe opening element; This value must be a full word (or be followed by a hyphen “- “) Such as:Eyes = small eyes - Lee Young-ho
   :focus	input:focus{backgroundr:yellow; }	Select the input element with focus
   The eldest son element:first-child	h1:first-child{color: red}	Select ah1The labelandIs the first element of its parent element (h2:first-childNot selected because H2 is the second son.)
   :before	span:before	At the end of each<span>Element before inserting content
   :after	span:after	At the end of each<span>Insert content after the element

   Version 3

   The selector	The sample	instructions
   The wine field brothers element1~element2	h1~p {color: red}	Version 2 can only select one brother, version 3 can select one brotherh1Behind allpbrother
   Attribute the beginning [attribute^=value]	[name^=” li “]{border: 1px solid red; }	Select all thenameAttribute to"Li"The opening element,^Similar to regular
   Attributes end [attribute$=value]	img[src$=”.png”]{width: 100%}	choosesrc for.png At the end of theimgThe element (Remember not to put a space after element.)
   Attribute contains [attribute*=value]	[name * = “lee”]} {width: 100%	Select all thenameAttribute contains"Li"Initial element
   :first-of-type	li:first-of-type{}	Select all theliandIs the first of its parent element
   :last-of-type	li:last-of-type{}	Select all theliandIs the last of its parent element
   :only-of-type	h2:only-of-type{}	Select ah2And it’s the only one (h1:only-of-typeNot selected because not unique)
   :only-child	h2:only-child{}	Select ah2And is of its parent elementAn only child Div1 had 4 so couldn’t pick himh2)
   :nth-child(n)	div:nth-child(1){}	Select adivandIs the first child of its parent element
   :nth-last-child(n)	div:nth-last-child(2){}	Select adivandIs the penultimate child of its parent element
   :nth-of-type(n)	p:nth-of-type(2)	Select that each p element is the second p element of its parent
   :nth-last-of-type(n)	p:nth-last-of-type(2)	The one that selects each p element is its parentThe bottomThe second p element
   The younger son element:last-child	h1:last-child	chooseh1The labelandIs the last child of its parent element
   :root	:root{background: red}	Document root element pseudo-class
   :empty	h1:empty{}	Select an H1 tag with no child elements (empty tag)<h1></h1>
   id:target	#footer:target(:target)	Select the anchor labels that are currently active (without id for all anchors)
   :not(selector)	:not(p)	Select elements that are not selector elements (that is, reverse select)
   ::selection	::selection{color: red}	Selects the text selected by the cursor
   :enabled	【 mainly used with form elements 】 input[type=”text”]:enabled	The selector matches each enabled element
   :disabled	【 mainly used with form elements 】 input[type=”text”]:disabled	The selector matches each disabled element
   :checked	【 mainly used with form elements 】 input:checked	The selector matches each selected input element (Only applicable to radio buttons or check boxes)
   :out-of-range	【 Mainly used for form verification 】 input:out-of-range{color: red; }	Select the input outside of the set range. <input type="number" min="5" max="10" />
   :in-range	【 Mainly used for form verification 】 input:in-range{color:green}	Select the element whose input value is within the specified range
   :read-write	【 mainly used with form elements 】 input:read-write{border: 1px solid blue}	Select the writable stateinput
   :read-only	【 mainly used with form elements 】 input:read-only{background: gray; }	Select the read-only stateinput
   :optional	【 Mainly used for form verification 】 input:optional{border: 1px solid black}	Select optionalinput
   :required	【 Mainly used for form verification 】 input:required{border: 1px solid red}	Select requiredinput <input required />
   :valid	【 Mainly used for form verification 】 input:valid{color: green}	Select the type of email [valid]input <input type="email" />
   :invalid	【 Mainly used for form verification 】 input:valid{border: 1px solid red}	Select enter email [illegal]input <input type="email" />

If there is any mistake, welcome to correct, thank you