“This is the 16th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

Hierarchical selectors (divided into descendants, children, neighbors and siblings)

Note: Block labels can be nested with inline labels and other block labels; Inline labels can only nest text and other inline labels, but block labels cannot be nested. One exception: p tags and H tags cannot nest block tags, nor can they nest themselves, only inline tags!!

(1) Descendant selector

Hierarchical selectors: Descendant selectors are separated by Spaces. Descendant selectors are all nested tags in this case, all OL tags in div tags. No matter how many ol tags are nested in OL, they are the descendants of div

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Descendant selector</title>

    <style>
        div ol{
            list-style: none;
        }
    </style>
    
</head>
<body>

<div>
    <ol>
        <li>I'm ordered list 1</li>
        <li>I'm ordered list 2</li>
        <li>I'm ordered list 3<ol>
                <li>I'm ordered list 111</li>
                <li>I'm ordered list 222</li>
            </ol>
        </li>
    </ol>
</div>

</body>
</html>
Copy the code

(2) Descendant selector (can be selected layer by layer)

The child selector can only select its son, in this case the son of the unordered list whose ID is UL1. The selector in the above syntax can be an ID selector, or a class selector or a tag name selector

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child selector</title>

    <style>
        #ul1>li{
            list-style: none;       /* This property removes the style of the list, which stands for removing the small circle in front of the unordered list */
        }
    </style>

</head>
<body>

<! Child selectors Colors, fonts, and so on are inherited in child selectors. So use the list-style property here to observe -->
<ul id="ul1">
    <li>1</li>
    <li>2</li>
    <li>3
    <ul>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ul>
    </li>
</ul>

</body>
</html>
Copy the code

(3) Sibling selector

In this case, p2’s father is body, so the body is all his brothers, and because the code executes from the top down, I’m not selected as paragraph tag 1

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sibling selector</title>

    <style>
        #p2~p{
            color:#ff8971
        }
    </style>

</head>
<body>

<p>I'm paragraph tag 1</p>
<p id="p2">I'm paragraph tag 2</p>
<p>I'm paragraph tag 3</p>
<p>I'm paragraph tag 4</p>

</body>
</html>
Copy the code

(4) Adjacent selector (adjacent sibling selector)

Level selectors 4: Adjacent selectors (adjacent sibling selectors) select with + first find the sibling, then select the adjacent one of them in this case, because the code executes from the top down, I’m not selected as paragraph tag 1

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"> <title> </title> <style>#p2+p{
            color:#ff8971} </style> </head> <body> <p1</p>
<p id="p2"I am the paragraph tag2</p> <p> I am the paragraph tag3</p> <p> I am the paragraph tag4</p>

</body>
</html>
Copy the code

Property selector

Attribute selector selects all p tags that have a name attribute. This is used in Input. If you only want to select I am paragraph tag 1, change to P [name=”p1″]

<! DOCTYPE html> <html lang="en">
<head>
    <meta charset="UTF-8"< span style> p[name]{color: red; } </style> </head> <body> <p name="p1"I am the paragraph tag1</p>
<p name="p2"I am the paragraph tag2</p>
<p name="p3"I am the paragraph tag3</p> <p> I am the paragraph tag4</p>

</body>
</html>
Copy the code

A summary of the use of selectors:

Weight size comparison summarizes a word: the more specific (is the beginning of the accuracy of said) the greater the weight; The more fuzzy the weight is!

🔆 In The End!

Start now, stick to it, a little progress a day, in the near future, you will thank you for your efforts!

This blogger will continue to update the basic column of crawler and crawler combat column, carefully read this article friends, you can like the collection and comment on your feelings after reading. And can follow this blogger, read more crawler in the days ahead!

If there are mistakes or inappropriate words can be pointed out in the comment area, thank you! If reprint this article please contact me for my consent, and mark the source and the name of the blogger, thank you!