You can read about CSS selectors in this article

1. Basic selector

(1) Element selector

The element in question is an HTML element, and we can use the element selector to style an HTML element of a given type

<! DOCTYPEHTML>
<html>
<head>
    <! For presentation purposes, use the internal style sheet to specify the element style.
    <style>
        /* Specifies that the text inside the  tag is gray */
        body { color: gray; }
        /* Specify the text color within the 
 tag as chrysanthemum blue */

        h1 { color: cornflowerblue; }
    </style>
</head>
<body>
    <h1>Title Here</h1>   <! -- Font color is chrysanthemum blue -->
    <p>Paragraph Here</p> <! -- Font color is grey -->
</body>
</html>
Copy the code
  • Override and Inheritance

According to CSS rules, the child element will inherit the style of the parent element.

That is, when we define the color of the element to be gray, the color of the child elements

and

will also be gray

However, the redefined child element style will override the inherited style [important]

That is, when we define color cornflowerblue for the

element, it overrides the color gray style setting

  • Selector grouping

Now consider that if we needed to make all of our headings chrysanthemum blue, we could define our stylesheets like this:

h1 { color: cornflowerblue; }
h2 { color: cornflowerblue; }
h3 { color: cornflowerblue; }
h4 { color: cornflowerblue; }
h5 { color: cornflowerblue; }
h6 { color: cornflowerblue; }
Copy the code

This definition is easy to understand, but too cumbersome, so we can combine it into the following form:

h1.h2.h3.h4.h5.h6 { color: cornflowerblue; }
Copy the code

This is called a grouping of selectors, which puts all elements with the same declaration together to make the definition more concise

  • The statement grouping

Since we can group selectors, can we also group style declarations? The answer is yes!

Again, if we wanted the background color of the paragraph to be black and the font color to be white, a simple statement would look like this:

p { background: black; }
p { color: white; }
Copy the code

Is that ok? Sure, but it’s also too verbose when there are more declarations

So we can combine declarations of the same element together, which we call declaration grouping

p {
    background: black;
    color: white;
}
Copy the code

(2) Class selector

The class selector selects a specific element based on the value of the class attribute by preending the class name with a dot (.)

<! DOCTYPEHTML>
<html>
<head>
    <! Use class selector in CSS -->
    <style>
        .important { color: cornflowerblue; }
    </style>
</head>
<body>
    <! -- Specify class name in HTML -->
    <h1 class="important">This is an important title</h1> <! -- Font color is chrysanthemum blue -->
    <h1>This is a headline</h1> <! -- Font color is black -->
    <p class="important">This is an important paragraph</p>   <! -- Font color is chrysanthemum blue -->
    <p>This is a paragraph</p>   <! -- Font color is black -->
</body>
</html>
Copy the code

(3) ID selector

The ID selector selects specific elements based on the value of the ID attribute by prefacing the ID with a hash sign (#)

<! DOCTYPEHTML>
<html>
<head>
    <! Use id selector in CSS -->
    <style>
        #important { color: cornflowerblue; }
    </style>
</head>
<body>
    <! -- Specify id in HTML -->
    <h1>This is a headline</h1> <! -- Font color is black -->
    <p id="important">This is an important paragraph</p> <! -- Font color is chrysanthemum blue -->
</body>
</html>
Copy the code

2. Hierarchy selector

(1) Descendant selector

Descendant selectors can help us select all descendant elements of an element. The general syntax is as follows:

selector1 selector2 { property: value; . }Copy the code

The syntax above means that only selector2, the descendant of selector1, is selected, not selector2 in general

<! DOCTYPEHTML>
<html>
<head>
    <! Using descendant selectors in CSS
    <style>
        p span {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>I'm the title,<span>It doesn't turn blue</span></h1>
    <p>I am the paragraph,<span>To blue</span></p>
</body>
</html>
Copy the code

(2) Descendant selector

In contrast to descendant selectors, child selectors work only on all child elements of an element. The general syntax is as follows:

selector1 > selector2 { property: value; . }Copy the code

The syntax above means that only selector2, the child of selector1, is selected, not selector2 in general

<! DOCTYPEHTML>
<html>
<head>
    <! Using child selectors in CSS
    <style>
        p > strong {
            color: red;
        }
    </style>
</head>
<body>
    <p>This is the paragraph,<strong>Turn red</strong></p>
    <p>This is the paragraph,<span>This is to emphasize,<strong>It doesn't turn red</strong></span></p>
</body>
</html>
Copy the code

(3) Universal sibling selector

The universal sibling selector helps us select all siblings after an element. The general syntax is as follows:

selector1 ~ selector2 { property: value; . }Copy the code

Selector2: selector2: selector2: selector2: selector2: selector2: selector2: selector2

<! DOCTYPEHTML>
<html>
<head>
    <! Use universal sibling selector in CSS -->
    <style>
        h1 ~ p {
            color: green;
        }
    </style>
</head>
<body>
    <h1>This is a headline that doesn't turn green</h1>
    <p>This is a paragraph that will turn green</p>
    <h3>This is a subtitle that won't turn green</h3>
    <p>This is another paragraph that's going to be green</p>
</body>
</html>
Copy the code

(4) Adjacent sibling selectors

In contrast to universal sibling selectors, adjacent sibling selectors work only on the next sibling element after an element. The general syntax is as follows:

selector1 + selector2 { property: value; . }Copy the code

The syntax above means that only the next sibling element after selector1, selector2, is selected, and does not apply to normal selector2

<! DOCTYPEHTML>
<html>
<head>
    <! Use sibling selectors in CSS -->
    <style>
        h1 + p {
            color: yellow;
        }
    </style>
</head>
<body>
    <h1>This is a headline that doesn't turn yellow</h1>
    <p>This is a paragraph that's going to turn yellow</p>
    <h3>It's a subtitle that doesn't turn yellow</h3>
    <p>This is another paragraph that won't turn yellow</p>
</body>
</html>
Copy the code

3. Property selector

The attribute selector allows you to select elements based on their attributes and attribute values. Its basic syntax is as follows:

selector[Property selector][...].{ property: value; . }Copy the code

The property selector has the following values:

Property selector describe
attribute Selects the element with the specified attribute
attribute=value Selects the element that has the specified attribute and the attribute value is value
attribute*=value Selects the element that has the specified attribute and the attribute value contains value
attribute^=value Selects the element with the specified attribute whose value begins with value
attribute$=value Selects the element with the specified attribute whose value ends in value
attribute~=value Selects the element that has the specified attribute and whose value contains the specified term value
attribute|=value Selects the element that has the specified attribute and whose attribute value begins with the specified term value

Among them, with ~ * = = ^ = and | = the difference between just lies in the word “vocabulary”, it represents what mean?

A “word” is an independent string, meaning that the string cannot be preceded or followed by any other symbol except -, otherwise it will not match

<! DOCTYPEHTML>
<html>
<head>
    <style>
        a[href^="http"] { font-size: 32px; } /* can match */
        a[href|="http"] { font-size: 10px; } /* Does not match */
        a[href*="exam"] { font-weight: 800; } /* can match */
        a[href~="exam"] { font-weight: 200; } /* Does not match */
        a[href$=".com"] { text-decoration: none; } /* can match */
    </style>
</head>
<body>
    <a href="https://www.example.com">The empty link</p>
</body>
</html>
Copy the code

4. Pseudo-elements

Pseudo-elements can set special effects to certain selectors. The basic syntax is as follows:

selector::pseudo-element { property: value; . }Copy the code

Common pseudo-elements are as follows:

Pseudo elements describe
first-letter Adds a special style to the first word of text that can only be used for block-level elements
first-line Adds a special style to the first line of text that can only be used for block-level elements
before Add a special style before the element
after Add special styles after the element
selection Adds a special style to the selected text

A simple example is as follows:

<! DOCTYPEHTML>
<html>
<head>
    <style>
        p::first-letter { font-size: xx-large; }
    </style>
</head>
<body>
    <p>It's a paragraph. It's a long, long paragraph</p>
    <p>And then this is another paragraph, which is a very, very long paragraph</p>
</body>
</html>
Copy the code

Using false elements, we can also draw a five-pointed star with one element, as shown in the following example:

<! DOCTYPEHTML>
<html>
<head>
    <style>
        .star {
            width: 0px;
            height: 0px;
            border-bottom: 9.51 px. solid yellow;
            border-left: 3.09 px. solid transparent;
            border-right: 3.09 px. solid transparent;
            position: relative;
        }
        .star::before..star::after {
            content: "";
            width: 0px;
            height: 0px;
            border-bottom: 9.51 px. solid yellow;
            border-left: 13.09 px. solid transparent;
            border-right: 13.09 px. solid transparent;
        }
        .star::before {
            transform: rotate(-36deg);
            position: absolute;
            top: 8.6 px.;
            left: -13.3852 px.;
        }
        .star::after {
            transform: rotate(36deg);
            position: absolute;
            top: 8.6 px.;
            left: -12.7948 px.;
        }
    </style>
</head>
<body>
    <div class="star"></div>
</body>
</html>
Copy the code

5, pseudo class

Pseudo-classes can add special effects to certain selectors. The basic syntax is as follows:

selector:pseudo-class { property: value; . }Copy the code

(1) Dynamic pseudo-class selector

grammar describe
link Select the anchor element that is not accessed
visited Select the anchor element that has been accessed
hover Select the hover element
active Select the active element
focus Select the element that gets focus

Here’s an example:

<! DOCTYPEHTML>
<html>
<head>
    <style>
		/* A :hover must be placed after a:link and a:visited */
        /* a:active must be placed after a:hover */
        a:link { color: red }		/* Unvisited links are shown in red */
        a:visited { color: green }	/* Visited links are shown in green */
        a:hover { color: blue }     /* The mouse moves over the link in blue */
        a:active { color: yellow }	/* The selected link is shown in yellow */
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">Baidu links</a>
</body>
</html>
Copy the code

(2) Element state pseudo-class selector

grammar describe
checked Select the selected button element
enabled Select the enabled form elements
disabled Select the disabled form elements

Here’s an example:

<! DOCTYPEHTML>
<html>
<head>
    <style>
		input:checked + span { color: cornflowerblue; }
    </style>
</head>
<body>
    <form action="#">
        <label><input type="checkbox" value="apple" /><span>Apple</span></label>
        <label><input type="checkbox" value="orange" /><span>Orange</span></label>
        <label><input type="checkbox" value="pear" /><span>Peer</span></label>
    </form>
</body>
</html>
Copy the code

(3) Structure pseudo-class selector

grammar describe
first-child Select the element that is the first child of the parent element
nth-child(n) Select the element that is the NTH child of the parent element
last-child Selects the element that is the last child of the parent element
only-child Select the element that is the only child of the parent element
first-of-type Selects the first child element of the specified type within the parent element
nth-of-type(n) Selects the NTH child element of the specified type within the parent element
last-of-type Selects the last child element within the parent element that has the specified type
only-of-type Selects the only child element within the parent element that has the specified type
root Select the element as the root element, for examplehtml:root
empty Select an element that has no child elements

Here’s an example:

<! DOCTYPEhtml>
<html>
<head>
    <style>
        h1:only-child {
            color: deepskyblue;
        }
        h3:first-child {
            color: skyblue;
        }
        p:last-child {
            color: lightskyblue;
        }
        span:last-child {
            color: lightblue;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Hello</h1>
    </div><hr/>
    <div class="section">
        <h3>Eternity in an hour</h3>
        <p>To see a world in a grain of sand,</p>
        <p>And a heaven in a wild flower,</p>
        <p>Hold infinity in the palm of your hand,</p>
        <p>And eternity in an hour.</p>
    </div><hr/>
    <div class="footer">
        <h3>Hello World</h3>
        <p>Say Hello To Tomorrow</p>
        <p>Say Goodbye To Yesterday</p>
        <span>Thank you for listening</span>
    </div>
</body>
</html>
Copy the code

(4) Target pseudo-class selector

grammar describe
target The element to which the specified URL points

Here’s an example:

<! DOCTYPEhtml>
<html>
<head>
    <style>
        * { margin: 0; padding: 0; }
        a { color: rgba(245.245.245.0.8); text-decoration: none; }
        a:link.a:visited.a:hover.a:active { text-decoration: none; }

        .menu {
            list-style-type: none;
            overflow: hidden;
        }
        .menu > li {
            float: left;
            width: 100px;
            height: 25px;
            border: 0.1 px. solid lightskyblue;
            background-color: cornflowerblue;
        }
        .menu > li:hover {
            background-color: lightskyblue;
        }

        .content {
            list-style-type: none;
            position: relative;
        }
        .content > li {
            position: absolute;
        }
        .poem {
            width: 400px;
            height: 80px;
            color: rgba(255.255.255.0.8);
            border: 0.5 px. solid lightskyblue;
            background-color: cornflowerblue;
        }

        #spring { z-index: 4; }
        #summer { z-index: 3; }
        #autumn { z-index: 2; }
        #winter { z-index: 1; }
        #spring:target { z-index: 5; }
        #summer:target { z-index: 5; }
        #autumn:target { z-index: 5; }
        #winter:target { z-index: 5; }

        .flex {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
    <ul class="menu">
        <li class="flex"><a href="#spring">In the spring</a></li>
        <li class="flex"><a href="#summer">In the summer</a></li>
        <li class="flex"><a href="#autumn">In the autumn</a></li>
        <li class="flex"><a href="#winter">In the winter</a></li>
    </ul>
    <ul class="content">
        <li id="spring"><div class="flex poem">Spring outing in the green grass</div></li>
        <li id="summer"><div class="flex poem">Enjoy the green lotus pool in summer</div></li>
        <li id="autumn"><div class="flex poem">Drink yellow flower wine in autumn</div></li>
        <li id="winter"><div class="flex poem">Winter singing white snow poems</div></li>
    </ul>
</body>
</html>
Copy the code

(5) Reject the pseudo-class selector

grammar describe
not(selector) Eliminate elements that meet the requirements

Here’s an example:

<! DOCTYPEhtml>
<html>
<head>
    <style>
        p:not(.important) { color: gray; }
    </style>
</head>
<body>
    <p>I am a paragraph</p>
    <p class="important">I am an important paragraph</p>
</body>
</html>
Copy the code