CSS中三大基础选择器以及优先级介绍

三大选择器是哪三个？ id选择器、类选择器、标签选择器优先级 id选择器>类选择器>标签选择器标签选择器：标签选择器又称元素选择器作用：根据标签名来选中指定的元素语法：标签...

三大选择器是哪三个？

id选择器、类选择器、标签选择器

优先级

id选择器>类选择器>标签选择器

标签选择器：

标签选择器又称元素选择器
作用：根据标签名来选中指定的元素
语法：标签名{}
例子：p{} h1{} div{}

示范代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            background-color: yellow;
            color: red;
            font-size: 50%;
            font-family: 黑体;
        }
    </style>
</head>
<body>
    <p>这段文字被修改为背景颜色为黄色，字体颜色为红色，字体大小为50%, 字体为黑体
    </p>
</body>
</html>

显示结果：

id选择器

作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
例子：#box{} #red{}

示范代码;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red {
            color: red;
        }
        
        #bgc {
            background-color: green;
        }
    </style>
</head>
<body>
    <h4 id="red">我想把这段字变成红色</h4>
    <h4 id="bgc"> 我想把这段字背景设为绿色</h4>
</body>
</html>

执行结果：

类选择器：

作用：根据元素的class属性值选中一个元素
语法：.class属性值{}
例子：.blue{} .yellow{}

示范代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blue {
            color: blue;
        }
        
        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h4 class="blue">我想把这段文字变成蓝色</h4>
    <h4 class="yellow">我想把这段文字背景变成黄色</h4>
</body>
</html>

显示结果：

更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

程序员编程交流QQ群：805358732

如果你想用Python开辟副业赚钱，但不熟悉爬虫与反爬虫技术，没有接单途径，也缺乏兼职经验
关注下方微信公众号：Python编程学习圈，获取价值999元全套Python入门到进阶的学习资料以及教程，还有Python技术交流群一起交流学习哦。

发表于 2021-07-15 14:17
阅读 ( 598 )
分类：WEB前端开发

CSS中三大基础选择器以及优先级介绍

三大选择器是哪三个？

优先级

标签选择器：

id选择器

类选择器：

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »