CSS的多种选择器

全局选择器

可以与任何元素匹配,优先级最低,一般做样式初始话,用通配符*来表示。

css 复制代码
*{
    font-size: 20px;
}

元素选择器

HTML文档中的元素有许多个,元素选择器选择的是页面上所有这种类型的标签,所以经常用来描述共性,无法描述某一个元素的个性。

注意:所有标签都可以时元素选择器。

css 复制代码
p{
    font-size: 20px;
}

h1{
    font-size: 40px;
}

类选择器

规定用圆点.来定义,针对你项要更改样式的标签使用,需要在标签上添加class属性。

html 复制代码
<h3  class="one-h3">标题</h3>
css 复制代码
.one-h3{
    font-size: 50px;
}

注意:类选择器可以被多种标签使用,类名不能以数字开头,同一个标签可以使用多个选择器,需要用空格隔开。

ID选择器

针对某个特定的标签来使用,只能使用一次,CSS中ID选择器用#加id名来表示。

html 复制代码
 <h3 id="one-h3">标题</h3>
css 复制代码
#one-h3{
    font-size: 50px;
}

注意:id是唯一的,id不能以数字开头

合并选择器

合并选择器的作用是提取共同的样式,减少代码重复。

html 复制代码
 <h3 class="one-h3">标题</h3>
   <h2 class="tow-h2">标题2</h2>
css 复制代码
.one-h3,.tow-h2{
    font-size: 40px;
}

选择器的优先级

行内样式>ID选择器>类选择器>元素选择器

相关推荐
xcjbqd01 小时前
CSS中隐藏元素的多重技巧与应用场景
前端·css
慕斯fuafua7 小时前
CSS——定位
前端·css
AnalogElectronic7 小时前
html+js+css实现七龙珠神龙召唤特效
javascript·css·html
qq_381338509 小时前
现代 CSS 黑科技:Container Queries、:has() 与嵌套语法实战
前端·css·科技
程序员buddha1 天前
SCSS从0到1精通教程
前端·css·scss
小李子呢02111 天前
前端八股CSS---CSS选择器和优先级
前端·css
Sheldon一蓑烟雨任平生1 天前
grid(一文读懂 css 网格布局)
前端·css·grid·grid-template·现代css·css 网格布局
05Nuyoah1 天前
CSS 基础认知和基础选择器
前端·javascript·css·node.js
Sheldon一蓑烟雨任平生1 天前
边框按钮(纯CSS)
前端·css·动态按钮·css变量·边框按钮·按钮动画
里欧跑得慢2 天前
Flutter 测试全攻略:从单元测试到集成测试的完整实践
前端·css·flutter·web