一、id和class选择器
如果你要在 HTML 元素中设置 CSS 样式,你需要在元素中设置 "id" 和 "class" 选择器,例如:
<button id="first">这是第一个按钮</button>
<button class="btn">这是第二个按钮</button>
二、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“ #”来定义。
#first {
color:red;
font-size:12px;
}
三、class类选择器
class 选择器用于描述一组元素的样式,class 选择器有别于 id 选择器,class 可以在多个元素中使用。
class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点".
"号显示:
.btn {
color:blue;
font-size:12px;
}
四、标签选择器
除了提到的 id 和 class 选择器外,第三种选择器为标签选择器,即以 HTML 标签作为 CSS 修饰所用的选择器。
标签选择器直接以标签名来定义。
div {
color:green;
font-size:12px;
}
五、内联选择器
内联选择器则是直接在标签内部写 CSS 代码
<div style="color:red;">这是一个div</div>
六、选择器优先级
1.CSS优先级算法
每个规则对应一个初始"四位数":0、0、0、0
若是 行内选择器,则加1、0、0、0
若是 ID选择器,则加0、1、0、0
若是 类选择器/伪类选择器,则分别加0、0、1、0
若是 元素选择器,则分别加0、0、0、1
算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高(不进位)
2.常用CSS选择器优先级
!important>内联选择器>Id选择器>class类选择器=伪类>标签选择器>通配符选择器
其中,在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式,是常用的手动提高选择器优先级的方式:
.btn {
/*这里的颜色优先级最高*/
color:red!important;
}
通配符选择器用于样式的全局设定,给所有HTML元素添加此样式,定义用一个“ * ”表示:
* {
font-size:12px
}
对于同级别的选择器优先级,则采用就近原则,选择最后出现的样式。