选择器

选择器一共有三种：

1、标签选择器

2、类选择器

3、id选择器

 

一、标签选择器：

示例：

<!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>标签选择器</title>
    <style>
        p{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        this is a div
    </div>
    <p> this is a p</p>
    <div>
        <p>this is also p</p>
    </div>
</body>
</html>

上面的例子中，p{color：aqua}就是一个标签选择器，意思是对p标签进行颜色修饰。在body的代码中，两个p标签，一个在body内，一个在body的div中。执行效果：

 

 

 

二、类选择器：

对于上面的例子，我们要对div中的p标签额外加上背景色该怎么办？

其实，我们只需要定义一个类选择器即可。看下面示例：

<!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>标签选择器</title>
    <style>
        p{
            color: aqua;
        }

        .bgc{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>
        this is a div
    </div>
    <p> this is a p</p>
    <div>
        <p class="bgc">this is also p</p>
    </div>
</body>
</html>

上面的例子中，定义了一个类选择器.bgc{background-color：brown}。注意：对于类选择器，名称一定以 . 开头。

执行结果：

 

 可以看到哈，对于div中的p标签被成功的添加了背景色的修饰。

 

三、id选择器：

id选择器和类选择器类型，不过id选择器是用#号来表示。

注意：id是唯一的，不能重复；

 

四、选择器的优先级：

id>class>标签选择器

 

id选择器的意义

所以id选择器存在的意义就是，来修改被标签选择器所选择的标签元素

posted @ 2022-04-06 15:59  Target_L  阅读(480)  评论(0)    收藏  举报