权重的原理与结构伪类 - 前端开发

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

## ### 一.实例演示权重的原理和计算方法

1.实例输出结果

2.html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的权重原理与计算方式</title>
    <link rel="stylesheet" href="css/weight.css" />
</head>
<body>
    <div class="col-md-6 bgc yellow">Header</div>
</body>
</html>

3.css代码

/* ! 1.选择器权重的原理及计算方法 */
/* ? (1) 实体标记：id, class, tag */
/* ? (2) 排列顺序:id, class, tag  */
/* ? (3) 计数方式：根据选择器中的实体标记数量计数 */
/* ! 2.选择器权重的实例演示 */
/* ? (1) 权重的表示方法 */
/* * id = #active = 1 */
/* * class = .top,.title = 2 */
/* * tag = header,h1,div = 3 */
/* * 所以此案例权重为（1,2,3） */
header.top h1.title div#active {
  color: red;
}
/* ? (2)权重的优先级 */
/* 0,0,1 */
h1 {
    color: red;
  }
/* 0,0,1 */ 
  h1 {
    color: yellow;
  }
/* * 根据css规则,层叠样式,后面的样式,会覆盖前面的样式 */
/* * 但是该方案会导致自定义样式规则,依赖书写位置和书写顺序 */
/* * 可以将h1(0,0,1)权重提升至大于(0,0,1)即可 */
/* * 将`h1`改为`body h1`,便可摆脱依赖书写位置和顺序 */
body h1 {
    color: yellow;
  }
/* ? (3)尽量不要在 `html` 中使用 `id`属性 */
/* * id 权重过大, 位于权重顶端  */
/* * id 会导致选择器失去弹性/弹性不足, 不利于调试或复用 */
/* ? (4)权重经典应用场景:class 动态调整样式案例如下 */
.col-md-6 {
    height: 5em;
    border: 3px solid;
  }
/* * 如果需要修改 .col-md-6.bgc 的样式 */
/* * 通过修改源码或者提高权重的方法都不可取 */
/* * 最小的代价就是修改html源码,添加自定义分类 */
  .col-md-6.bgc {
    background-color: lightgreen;
  }
  .col-md-6.yellow {
    color: yellow;
  }

二.实例结构伪类演示

1.实例输入结果

(1)简单结构伪类匹配第1个

(2)简单结构伪类匹配第2个

(3)简单结构伪类匹配最后1个

(4)结构伪类语法糖匹配第1个

(5)结构伪类语法糖匹配最后1个

(6)结构伪类an+b正向匹配全部

(7)结构伪类an+b正向匹配第3个到最后1个

(8)结构伪类反向匹配前3个

2.html代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>结构伪类</title>
    <link rel="stylesheet" href="css/fake-class.css" />
  </head>
  <body>
    <ul class="list">
      <li class="li">item1</li>
      <li class="li">item2</li>
      <li class="li">item3</li>
      <li class="li">item4</li>
      <li class="li">item5</li>
      <li class="li">item6</li>
    </ul>
  </body>
</html>

3.css代码

/* ! 1.结构伪类-简单匹配 */
/* ? （1）用伪类匹配第1个 */
/* .list > li:nth-of-type(1) {
    background-color: lightblue;
} */
/* ? （2）用伪类匹配第2个 */
/* .list > li:nth-of-type(2) {
    background-color: lightblue; */
/* ? ..... */
/* ? （3）用伪类匹配最后一个 */
/* .list > li:nth-of-type(6) {
    background-color: lightblue; */
/* ! 2.结构伪类-复杂匹配 */
/* ? (1)匹配第一个和最后一个:用语法糖 */
/* * 匹配第1个 */
/* .list > li:first-of-type {
    background-color: lightblue;
} */
/* * 匹配最后1个 */
/* .list > li:last-of-type {
    background-color: lightblue;
} */
/* ? (2)通过 :nth-of-type(an + b) 匹配前三个 */
/* a系数,n参数,b偏移量从0开始,计算出来的索引必须是有效的(从1开始) */
/* * 匹配第1个 */
/* .list > li:nth-of-type(0n+1) {
    background-color:lightblue ;
} */
/* * 匹配第3个 */
/* .list > li:nth-of-type(0n+3) {
    background-color:lightblue ;
} */
/* * 匹配全部用正向匹配(a=1) */
/* a=1,n不变,b从0开始 */
/* .list > li:nth-of-type(1n+0) {
    background-color:lightblue; */
/* * 匹配第4个-第6个用正向匹配(a=1) */
/* .list > li:nth-of-type(1n+3) {
    background-color: lightblue;
} */
/* * 匹配前三个用反向匹配(a=-1)*/
.list > li:nth-of-type(-1n + 3) {
    background-color: lightblue;
  }