Common compound selectors include: descendant selectors, child selectors, union selectors, pseudo-class selectors and so on

Descendant selector

  • The descendant selector, also known as the inclusion selector, can select the face elements in the parent element. It is written in the front of the outer label, the inner label is written in the back, separated by Spaces. When the tags are nested, the inner label becomes the descendant of the outer label

Grammar:

The element1The element2{style declaration}Copy the code

The above syntax indicates that all elements 2(descendant elements) within element 1 are selected.

  • Element 2 can be a son, a grandchild, etc., as long as it is a descendant of element 1
  • Elements 1 and 2 can be any base selector
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul li{
            color: blue;
        }
    </style>
</head>
<body>
   <ul>
       <li>3</li>
       <li>3</li>
       <li>3</li>

   </ul>
</body>
</html>
Copy the code

Child selectors

  • Child element selector (child selector)- Selects only the nearest child of an element.

Grammar:

The element1> element2{style declaration}Copy the code
  • The above syntax indicates that element 2 is selected for all direct descendants (child elements) of element 1
  • Element 2 has to be a parent child, its grandchild, its great-grandchild, you can call it a parent child selector
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .nav>a {
            color: green;
        }
    </style>
</head>
<body>
   <div class="nav">
       <a href="#">I am a son</a>
       <p>
           <a href="#">I am a grandson</a>
       </p>
   </div>
</body>
</html>
Copy the code

Union selector

  • Union selectors can select groups of tags while defining the same style for them, usually for collective declarations.
  • Union selectors are connected by commas (,). Any form of selector can be part of a union selector (including descendant selectors, child selectors, etc.).

Grammar:

The element1Elements,2{style declaration}Copy the code

Select elements 1 and 2. For example:

ul.div{style declaration}Copy the code
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div..pig li{
            color: red;
        }
    </style>
</head>
<body>
   <div>Big bear</div>
   <p>Two bears</p>
   <span>Baldheaded stronger</span>
   <ul class="pig">
       <li>Peppa Pig</li>
       <li>I wish my father</li>
   </ul>
</body>
</html>
Copy the code

Pseudo class selector

  • Pseudo-class selectors are used to add special effects to certain selectors, such as adding special effects to links, or selecting the first or NTH element.
  • Pseudo-class selector writing is characterized by colons (:), such as hover, :first-child.
  • There are many pseudo class selectors, such as link pseudo class, structure pseudo class and so on
a:link  /* Select all unvisited links */
a:visited /* Select all links that have been visited */
a:hover /* Select the link over which the mouse pointer is located */
a:active /* Select the active link (mouse down the unpopped link)*/
Copy the code

Link pseudo-class selector considerations

  • 1, to ensure the effect, please declare in the order of LVHA :link – :visited – :hover – :active.
  • 2, Memory method: Love hate or Lv bag hao
  • 3. Since link A has a default style in the browser, we need to specify a separate style for the link in actual work

Link pseudo-class selector in the actual work of development:

/* a is all the links of the label selector */
a {
	color:gray;
}

/* :hover is a link to pseudo-class selector mouse over */
a:hover {
	color:red; /* When the mouse moves over it, the grey color changes to red */
}
Copy the code

There are div pseudo-classes as well

div:hover:color:red;
Copy the code

Focus pseudo-class selector

The :focus pseudo-class selector is used to select the form element that gets focus

The focus is the cursor, which is typically available only for input form elements, so this selector is also for form elements. (Less used)

input:focus {
	background-color: green;
}
Copy the code