What are the categories of css selectors?-Front-end Q&A-php.cn

What are the categories of css selectors?

醉折花枝作酒筹

Release： 2023-01-06 11:14:43

Original

15270 people have browsed it

The classification of css selectors are: 1. Tag selector; 2. Class selector; 3. ID selector; 4. Global selector; 5. Combination selector; 6. Inherited selector; 7 , pseudo-class selector; 8. Attribute selector for string matching.

What are the categories of css selectors?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

There are many types of css selectors. Let’s take a look at the types of css selectors

1. Tag selectors (such as: body, p, p, ul, li).

2. Class selector (such as: class="head", class="head_logo").

3. ID selector (such as: id="name", id="name_txt").

4. Global selector (such as: *).

5. Combine selectors (such as: .head .head_logo, please note that the two selectors are separated by the space bar).

6. Inherit the selector (such as: p p, note that the two selectors are separated by the space bar).

7. Pseudo-class selector (for example: link style, pseudo-class of a element, 4 different states: link, visited, active, hover.).

8. Attribute selectors for string matching (^ $ * three types, corresponding to start, end, and inclusion respectively).

The most commonly used CSS selectors among the above eight CSS selectors are label selectors, .class selectors, ID selectors, attribute selectors, and pseudo-class selectors.

Below we will give an example of each of these five css selectors: (For other selector examples, please refer to the css manual)

(1) Label selector:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>余生有你</p>
    <p>幸得安喜</p>
</body>
</html>

Copy after login

The effect is as follows:

What are the categories of css selectors?

(2). Class selector:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .class1{
            background-color: blue;
        }
        .class2{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div class="class1">div</div>
    <div class="class2">div</div>
    <div class="class3">div</div>
</body>
</html>

Copy after login

The effect is as follows:

What are the categories of css selectors?

## (3) ID selector:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #class1{
            background-color: blue;
        }
        #class2{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="class1">div</div>
    <div id="class2">div</div>
    <div id="class3">div</div>
</body>
</html>

Copy after login

The effect is as follows:

What are the categories of css selectors?

(4) Attribute selector:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
        div[id=class2]{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div id="class1">div</div>
    <div id="class2">div</div>
    <div id="class3">div</div>
</body>
</html>

Copy after login

The effect As follows:

What are the categories of css selectors?

(5) Pseudo-class selector:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
           color: brown;
           background: cornsilk;
        }
        a:hover{
           text-decoration: none;
           color: rgb(252, 0, 0);
        }
        a:active{
            background: rgb(202, 0, 175);
            color: rgb(59, 59, 59);
        }
        a:visited{
            color: brown;
            background: cornsilk;
        }
    </style>
</head>
<body>
    <a href="#">哈喽，看我，你在干什么</a>
</body>
</html>

Copy after login

Effect:

What are the categories of css selectors?

Recommended Learn:

css video tutorial

The above is the detailed content of What are the categories of css selectors?. For more information, please follow other related articles on the PHP Chinese website!