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

相关推荐
ZhengEnCi1 天前
登录页电脑端怎么设计才不空:5 种布局方案与可粘贴 AI 提示词
前端·css·设计
神膘护体小月半2 天前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
treasure1402 天前
【复古】浅尝Django前后端不分离
前端·css·python·django·bootstrap·html·web
ZhengEnCi3 天前
前端项目为什么需要一份统一的 theme.css:用 CSS 变量管住全局样式与主题切换
前端·css·前端工程化
牧艺3 天前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
程序员大阳4 天前
HTML+CSS+JS对话式实战(7)-学生端活动报名功能开发
javascript·css·html·活动报名
程序员大阳4 天前
HTML+CSS+JS对话式实战(5)-活动管理页之查看报名名单的实现
javascript·css·html·查看报名名单
曦樂~4 天前
【Web Development】02 CSS
前端·css
东鹏特饮4 天前
经典打砖块(Breakout)游戏
前端·css·css3
程序员大阳5 天前
HTML+CSS+JS对话式实战(9)-项目总结与问题分析
javascript·css·html·实战·项目总结