• 博客园logo
  • 会员
  • 周边
  • 新闻
  • 博问
  • 闪存
  • 众包
  • 赞助商
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

huyyyyy

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

CSS-选择器

一、全局选择器(注释单行快捷键)
*

image

二、标签选择器

image
(只要是标签都可以成为标签选择器
无论多深都能被选择上,但一旦选中控制的为所有此标签)

三、类(class)选择器
核心规则:class 首字符只能是字母 / 下划线 / 短横杠,后续可跟数字 / 字母 / 下划线 / 短横杠,禁止特殊符号和空格;
开发规范:优先小写 + 中线分隔 + 语义化命名(如.text-1122),适配蓝桥杯竞赛和企业开发;
延伸知识:id 命名规则和 class 基本一致,仅多了「页面内唯一」的要求。
下面是class的命名

image
下面是class选择器的调用
image

四、Id选择器

image
一个Id命名后,不可重复使用其名字
可以执行但在加入js后会出现错乱

五、合并选择器
如图所示
选择器名逗号隔开

image
⚠️选择器优先级
image

⚠️如果是相同选择器则是最后一个覆盖前面的

点击查看代码
.t1{
            color: aqua;

        }
        .t2{
            color: chocolate;
        }
        **/* 代码执行顺序是从上往下执行所以相同选择器下最后一个样式生效 */**
  <p class="t1 t2">yyyyyy</p>

posted on 2026-01-25 16:14  涩7  阅读(0)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3