Use of selectors

Table of contents

1.Attribute selector

2. Pseudo-class selector

3. Pseudo element selector

---

1.Attribute selector

 Syntax: [attribute name]{} selects elements containing the specified attribute

                 [Attribute name = attribute value] {} Select elements containing specified attributes and specified attribute values

                 [Attribute name^= attribute value] {} Select element that contains specified attributes and the beginning of the designated attribute value

                 [Attribute name $ = attribute value] {} Select element that contains specified attributes and the ending attribute value ending

                 [Attribute name*= attribute value] {} Select the specified attribute, as long as the element containing a certain attribute value

For example, change the color of the title attribute to red.

[title]{
    color: red;
  }

For example, change the content with the title attribute and the attribute value "ab" to green.

 [title=ab]{
    color: green;
  }

For example, change the background color of the content whose title attribute starts with "ab" to pink.

[title^=ab]{
    background-color: pink;

For example, change the font of the content with the title attribute and the attribute value ending in "ab" to 40px.

[title$=ab]{
    font-size: 30px;
    }

For example, change the background color of the element with the title attribute and the attribute value containing "c" to green.

[title*=c]{
    background-color: green;
  }

2. Pseudo-class selector

Pseudo class Non-existent class Represents a state of an element, such as first, last, mouse hover, mouse click

        :first-child the first child element

        :last-child The last child element

        :nth-child(m) Select the mth child element

              Select all child elements

              2n/even  even

              2n+1/odd odd number

        The above pseudo-classes are sorted according to all sub-elements

       

        :first-of-type the first child element

        :last-of-type The last child element

        :nth-of-type(n) Select the nth sub-element

          The above pseudo-classes are sorted within the same type.

not() negates the pseudo-class and removes elements that meet the conditions.

3. Pseudo element selector

Pseudo-class of element: :link indicates the status of the unvisited a tag 

For example, add red font to unvisited hyperlinks

 a:link{
         color: red;
}

                   :visited indicates the status of the visited a tag 

For example, add green font to visited hyperlinks

 a:visited{
         color: green；
       }

                 :hover The state of the element after the mouse is moved in 

For example, when the mouse is moved in, the link font increases to 30px

a:hover{
        font-size: 30px;
}

                 : Active mouse clicks, the state of the element 

For example, after mouse click, add background color pink

div:active{
           background-color:pink
           }

                ::first-letter the first letter

For example, let the first letter of the article always have a font of 24px

div::first-letter{
        font-size: 24px;
      }

          ::first-line first line

For example, let the first line of the article add a background color of yellow

div::first-line{
        background-color:yellow;
      }

          ::selection The effect of the selected content

For example, let the selected content have a red font

div::selection{
        color: red;
      }

          ::before Before the starting position of the element

For example, + 'Hello' before the beginning of the element

 div::before{
        content: '你好';
      }

          ::after After the end position of the element

For example, after the end of the element + 'Hello'

div::after{
        content: '你好呀';
           }