# 选择器

直接设置标签样式

# 全局选择器

可以与任何元素匹配,改变所有标签样式,优先级最低,一般做样式初始化

*{
    margin: 0;
    padding: 0;
}
1
2
3
4

# 元素选择器

HTML文档中的元素,pbdivaimgbody等。

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述同一标签的“共性”,无法描述某一个元素的“个性”。

p {
    fort-size: 15px;
}
1
2
3

再例如,想让 “元素选择器” 中的 “元素” 两个字变为红色字体,那么可以用<span>标签,把 “元素” 这两个字围起来,然后给<span>标签加一个标签选择器。

/*在.css文件中*/
span {
    color: red;
}
1
2
3
4
<!--在.html文件中-->
<body>
    <p><span>元素</span>选择器</p>
</body>
1
2
3
4

温馨提示

所有的标签都可以是选择器。比如ul、li、label、dt、dl、input、div等

无论这个标签藏得多深,一定能够被选择上

选择上所有,而不是一个

# 类选择器

规定用圆点.来定义,针对你想要的所有标签使用

优点:灵活

/*在.css文件中*/
.onceclass {
    width: 800px;
}
1
2
3
4
<!--在.html文件中-->
<body>
    <h2 class="onceclass">啊啊啊</h2>
</body>
1
2
3
4

class属性的特点

类选择器可以被多个标签使用

类名不能以数字开头,且只能以字母、-、数字来命名

同一标签可以使用多个类选择器,用空格隔开

<h2 class="classone classtwo">啊啊啊</h2>  <!--正确-->

<h2 class="classone" class="classtwo">啊啊啊</h2>  <!--错误-->
1
2
3

# id选择器

针对某一个特定的标签来使用,只能使用一次,与类选择器不同。css中的id选择器#来定义

/*在.css中*/
#mytitle {
    border: 3px dashed green;
}
1
2
3
4
<!--在.html中-->
<h2 id="mytitle">啊啊啊</h2>
<h2 id="mytitle">你好</h2>  <!--不能再用-->
1
2
3

注意

id是唯一的

id不能以数字开头

# 合并选择器

语法:选择器1,选择器2,...{}

作用:为多种标签提取共同的样式,减少重复代码

/*在.css中*/
.text,.title {
    font-size: 30px;
    color: red;
}
h2,h3 {
    font-size: 50px;
    color: green;
}
1
2
3
4
5
6
7
8
9
<!--在.html中-->
<p class="text">我是文本</p>
<h1 class="title">我是标题</h1>
<h2>哈哈哈哈哈</h2>
<h3>嘻嘻嘻嘻嘻</h3>
1
2
3
4
5

# 选择器优先级

CSS中,权重用数字衡量

元素选择器权重:1

类选择器权重:10

id选择器权重:100

内联样式 (opens new window)权重:1000

优先级从高到低:内联样式>id选择器>类选择器>元素选择器

上次更新时间:: 3/2/2025, 11:27:16 PM