Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

A commonly used structured pseudo-class selector

  1. :root selector: used to match the root element of the document. In HTML, the root element is always an HTML element, so the style defined by this selector works for all elements. For those that are not needed, a separate style can be set for overwriting.
<style>
    :root{color="red"; }/* refers to all elements */
    h2{color="blue"; }Especially the h2 / * * /
</style>
Copy the code
  1. The :not selector is used when you want to apply a style to a structure element, but you want to exclude the child structure elements below that structure element from using the style.
<style>
body *:not(h3){
    color:red;    /*'*' represents all, so this setting only excludes h3*/
}
</style>
Copy the code

3. Only – Child selector: Use this if a parent element has only one child. (Only child)

<style>
li:only-child{
    color:red;
}
</style>
<body>
    <ul>
        <li>The selector</li>
    </ul>
Copy the code
  1. First-child and last-Child selectors: For styling the first or last child of a parent element.
p:first-child{
    color:blue;  /* The first sentence is pink */
}
p:last-child{
    color:pink;  /* The second sentence is blue */
}
/* For example, there are four sentences in body */
<body>
<p>The first sentence</p>
<h3>The second sentence</h3>
<p>The third sentence</p>
<p>The fourth sentence</p>
</body>
Copy the code

5. Nth-child (n) and nth-Last-Child (n) selectors: An extension of the previous selector. You can select any child element you want, like the second or penultimate child element in the previous example, where n is the number of children.

6. Nth-of-type (n) and nth-last-of-type(n) selectors: Used to match the NTH or penultimate NTH child element of a particular type belonging to the parent element.

<style>
p:nth-last-of-type(2){
    color:red;    /* Unlike the previous example, this one only looks for elements with the p tag and skips the other tags */
}
</style>
<body>
<h1>What?</h1>
<p>What?</p>
<h2>What?</h2>
<p>What?</p>
</body>
Copy the code

Empty selector: Used to select all elements with no child elements or empty text content.

<style type="text/css">
p{
    background-color:red;
}
:empty{
    background-color:green;    /* The background color of the other paragraphs is red, but the background color of the empty content is green */
}

</style>
<body>
<p>The selector</p>
<p>The selector</p>
<p></p>
<p>The selector</p>
Copy the code

8. Target selector: Used to style a target element in a page (the element’s ID is used as a hyperlink in the page). The style set by the :target selector takes effect only after the user clicks the hyperlink in the page and jumps to the Target element. Use:

<style type="text/css">... dl{display: none;
}
dl:target{
    display:block;
}
</style>
Copy the code

Then, if you have an id called “ps”, such as

, use it as a hyperlink.

Pseudo element selector

  1. Before pseudo-element selector
  • For example, add a little icon at the beginning of a paragraph:P :before{content:url(image path); }.
  • You can also make your own design, such as adding a small 10 by 10 square to the beginning of a paragraph.
p:before{
    content: "";
    width: 10px;
    height: 10px;
    display: inline-block;/* Convert inline elements to inline blocks */
    background-color: pink; 
Copy the code

Effect:2. After pseudo-element selector: Use the same as before, except for the difference between before and after.