CSS选择器的分类 之 基础选择器
- 前言
- 标签选择器(元素选择器)
- 类选择器
- 多类名
- id 选择器
- 通配符选择器
前言
基础选择器是由单个选择器组成。
标签选择器(元素选择器)
书写格式(示例):
标签名 {
属性: 属性值;
}
说明:
用 HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式
作用:
标签选择器可以把某一类标签全部选择出来,比如所有的<div>和<span>标签
优点:
能快速为页面中同类型的标签统一设置样式
缺点:
不能设计差异化样式,只能选择全部的当前标签
类选择器
书写格式(示例):
.类名{
属性: 属性值;
......
}
<div class="类名">什么是快乐星球!</div>
多类名
多类名的使用方式:
<style>
.red {
color: red;
}
.font35 {
font-size: 35px;
}
</style>
<div class="red font35">什么是快乐星球</div>
注意:
(1) 在标签中class属性中写多个类名
(2) 多个类名中间必须用空格分开
(3) 这个标签就可以分别具有这些类名的样式
多类名的使用场景:
<div class="pink font20">什么是快乐星球</div>
<div class="pink ">什么是快乐星球</div>
<div class="font15">什么是快乐星球</div>
<div class="pink font15">什么是快乐星球</div>
注意:
(1) 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
(2) 这些标签都可以调用这个公共的类,然后再调用自己独有的类
(3) 从而节省CSS代码,统一修改也非常方便
id 选择器
书写格式(示例):
#id名{
属性:属性值;
......
}
<div id="id名">什么是快乐星球!</div>
id选择器的口诀:
样式 # 定义
结构 id 调用
只能调用一次
别人切勿使用
id 选择器和类选择器的区别:
(1)类选择器(class)相当于的名字,一个人可以有多个名字,同一个名字也可以被多个人使用
(2)id 选择器相当于人的身份证号码,全中国是唯一的,不得重复
(3)id 选择器和类选择器最大的不同在于使用次数上
(4)类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用
通配符选择器
书写格式(示例):
*{
属性:属性值;
......
}
应用举例(清除所有的元素标签的内外边距):
*{
margin: 0;
padding: 0;
}
注意:
(1)通配符选择器不需要调用,自动就给所有的元素使用样式
(2)特殊情况才使用