CSS中的三大基础选择器以及优先级（萌新必看）

最新推荐文章于 2023-04-23 23:26:21 发布

尐╋猪

最新推荐文章于 2023-04-23 23:26:21 发布

阅读量1.9k

点赞数 6

分类专栏：前端文章标签： css html css3 html5 javascript

本文链接：https://blog.csdn.net/qq_45623543/article/details/109146428

版权

前端专栏收录该内容

18 篇文章 4 订阅

订阅专栏

《个人学习笔记十》

三大选择器是哪三个？

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>

显示结果：
在这里插入图片描述

尐╋猪

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS中的三大基础选择器以及优先级（萌新必看）

《个人学习笔记十》三大选择器是哪三个？id选择器、类选择器、标签选择器优先级id选择器>类选择器>标签选择器标签选择器：标签选择器又称元素选择器作用：根据标签名来选中指定的元素语法：标签名{}例子：p{}     h1{}     div{}示范代码：<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫