1 Introduction to selectors

1.1 # id

  • The ID selector can specify a specific style for HTML elements marked with a specific ID
  • CSS id selectors are defined with “#”
  • Try not to start the ID attribute with a number

Example: Match elements with id=”case” as red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        #case {
            color: red;
        }
    </style>
</head>

<body>
    <p id="case">The paragraph is in red</p>
    <p>This paragraph is not affected</p>
</body>

</html>
Copy the code

1.2. The class

  • The class selector is used to describe the style of a set of elements
  • CSS class selectors are displayed as a dot “.
  • The difference between class and ID: Class can be used in more than one element

Instance: Elements that match class=”case” are red

<! DOCTYPEhtml>
<html>

<head>  
    <meta charset="utf-8">
    <style>
        .case {
            color: red;
        }
    </style>
</head>

<body>
    <p class="case">The paragraph is in red</p>
    <h3 class="case">The title is red</h3>
    <p>This paragraph is not affected</p>
</body>

</html>
Copy the code

1.3 element

  • Use HTML tags as selectors for CSS decorations

Example: Matches

tag elements as red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1 {
            color: red;
        }
    </style>
</head>

<body>
    <h1>The title is red</h1>
    <h2>The title is not affected</h2>
    <h3>The title is not affected</h3>
    <h4>The title is not affected</h4>
</body>

</html>
Copy the code

1.4 *

  • Matches all element tags in the HTML

Example: The element that matches all tags is red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        * {
            color: red;
        }
    </style>
</head>

<body>
    <h1>The title is red</h1>
    <p>The paragraph is in red</p>
</body>

</html>
Copy the code

1.5 element. The class

  • Matches the element tag that uses class

Example:

tag elements matching class=”case” are red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1.case {
            color: red;
        }
    </style>
</head>

<body>
    <h1 class="case">The title is red</h1>
    <h2 class="case">The title is not affected</h2>
    <h3 class="case">The title is not affected</h3>
    <h4 class="case">The title is not affected</h4>
</body>

</html>
Copy the code

1.6 element1 element2

  • Specifies that the target selector must be inside an element corresponding to one of the selectors
  • This selector applies to all subsequentelement1 child elements, element2, regardless of how many elements are separated

Example: Match each

tag inside the

element as red 
<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>This paragraph is in red</p>
        <b><p>This section is also red</p></b>
        <b><i><p>This paragraph is still red</p></i></b>
    </div>
    <p>This section is not affected</p>
</body>

</html>
Copy the code

1.7 element1 > element2

  • Enforces the target selector to be a label that contains the inner label of the corresponding selector
  • This selector only applies to element2, the first generation child of element1, and does not affect subsequent elements

Example: Matching a

child tag whose parent element is

is red 
<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        div>p {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <p>This paragraph is in red</p>
        <b><p>This section is not affected</p></b>
        <b><i><p>This section is not affected</p></i></b>
    </div>
    <p>This section is not affected</p>
</body>

</html>
Copy the code

1.8 element1~element2

  • This selector applies to all element2 elements that are adjacent to the element1 element after the occurrence of the element1 element

Example: Match the style of each

tag next to the

tag as red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1~p {
            color: red;
        }
    </style>
</head>

<body>
    <p>This section is not affected</p>
    <h1>The title</h1>
    <p>This paragraph is in red</p>
    <p>This paragraph is in red</p>
</body>

</html>
Copy the code

1.9 + element1 element2

  • This selector only applies to the first element2 element next to the element1 element

Example: The first

tag next to the matching

tag is styled red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        h1+p {
            color: red;
        }
    </style>
</head>

<body>
    <p>This section is not affected</p>
    <h1>The title</h1>
    <p>This paragraph is in red</p>
    <p>This section is not affected</p>
</body>

</html>
Copy the code

1.10 the attribute

  • The selector matches the tag with the attribute attribute

Instance: Matches elements with the target attribute as red

<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <style>
        a[target] {
            color: red;
        }
    </style>
</head>

<body>
    <a href="https://www.baidu.com/" target="_blank">Baidu Search (red)</a><br />
    <a href="https://cn.bing.com/" target="_top">Bing Search (red)</a><br />
    <a href="www.google.com">Google search (not affected)</a>
</body>

</html>
Copy the code

2 Priority of the selector

2.1 Priority concept

  • Priority is determined and applied to an element by the browser by determining which attribute values are most relevant to the element.
  • The priority is determined only by the matching rules composed of selectors.
  • Priority is a weight assigned to a specified CSS declaration, determined by the value of each selector type in the matching selectors.

2.2 Priority order

The following selectors have an increasing priority:

  1. Universal selector (*)
  2. Element selector (
  3. Class selector (.class)
  4. Attribute selectors
  5. ID selector (# ID)
  6. Inline style

2.3 Weight Calculation

Weights of each type of selector:

The selector The weight
Inline style 1000
The ID selector 100
Class selectors 10
Element selector 1

The priority follows the following rules:

  • Selectors have a weight, and the larger the weight, the higher the priority
  • When weights are equal, the later stylesheet setting is superior to the first
  • CSS styles set by the web writer take precedence over those set by the browser
  • An inherited CSS style is inferior to a later specified CSS style
  • In the same set of property Settings! importantRules have the highest priority