CSS笔记：CSS 基础选择器

最新推荐文章于 2024-11-10 11:49:10 发布

金丝先生

最新推荐文章于 2024-11-10 11:49:10 发布

阅读量99

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/weixin_42643070/article/details/118657166

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS 基础选择器

1、类选择器

class，如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器.
语法：

.类名 {
 属性1: 属性值1; 
 ...
}

例如：

<head>
<style>
    .red {
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
</head>
<body>
    <div class="red">红色</div>
</body>

2、id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义。

语法：

#id名 {
 属性1: 属性值1; 
 ...
}

注意：id 属性只能在每个 HTML 文档中出现一次。口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用

id 选择器和类选择器的区别
① 类选择器（class）好比人的名字，一个人可以有多个名字，同时一个名字也可以被多个人使用。
② id 选择器好比人的身份证号码，全中国是唯一的，不得重复。
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多，id 选择器一般用于页面唯一性的元素上，经常和 JavaScript 搭配使用。