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