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选择器>类选择器>元素选择器

相关推荐
Mr Xu_15 小时前
前端开发中CSS代码的优化与复用:从公共样式提取到CSS变量的最佳实践
前端·css
Lee川17 小时前
CSS盒模型实战:用代码透视 `border-box`与 `content-box`的天壤之别
css
哈里谢顿1 天前
CSS 入门完全指南:从零构建你的第一个样式表
css
. . . . .1 天前
CSS 编写与管理范式 - Tailwind和CSS-in-JS
css
RFCEO2 天前
前端编程 课程十六、:CSS 盒子模型
css·前端基础课程·css盒子模型·css盒子模型的组成·精准控制元素的大小和位置·css布局的基石·内边距(padding)
夏幻灵2 天前
CSS三大特性:层叠、继承与优先级解析
前端·css
会编程的土豆3 天前
新手前端小细节
前端·css·html·项目
珹洺3 天前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu3 天前
VS Code HTML CSS Support 插件详解
前端·css·html
1024小神3 天前
用css的clip-path裁剪不规则形状的图片展示
前端·css