1. 伪类选择器

根据元素的位置或状态来匹配子元素

1.1 结构伪类

与上下文选择器很相似

后文演示所用 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="rest.css" /><style>/* 此处填充 演示代码 */</style></head><body><ul class="list"><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li><li class="item">item5</li><li class="item">item6</li><li class="item">item7</li><li class="item">item8</li><li class="item">item9</li></ul></body>
</html>
1. :nth-child(an+b):获取任意位置的元素

  • 参数说明

  • a: 系数,[0,1,2,3,...]

  • n: 参数, [0,1,2,3,...]

  • b: 偏移量, 从 0 开始

规则: 计算出来的索引,必须是有效的(从 1 开始)

例子 1：匹配父元素中的第 n 个子元素，元素类型没有限制。n 可以是一个数字，一个关键字，或者一个公式。

  • 代码如下：

.list > .item:nth-child(5) {background-color: red;
}

  • 运行效果

例子 2：获取前三个元素

  • 代码如下：

.list > .item:nth-child(-n + 3) {background-color: red;
}

  • 运行效果

例子 3：获取最后三个元素

  • 代码如下：

.list > .item:nth-last-child(-n + 3) {background-color: red;
}

  • 运行效果

例子 4：选择列表的奇数项,参数可设为（2n+1）或者（2n-1）

  • 代码如下：

.list > .item:nth-child(2n + 1) {background-color: red;
}
.list > .item:nth-child(2n - 1) {background-color: red;
}

可使用参数（odd）进行选择，更加方便快捷明了

.list > .item:nth-child(odd) {background-color: red;
}

  • 运行效果

例子 5：选择列表的偶数项，可用参数（even）或（2n）

  • 代码如下：

.list > .item:nth-child(even) {background-color: red;
}
.list > .item:nth-child(2n) {background-color: red;
}

  • 运行效果

例子 6：选择有固定间隔特征的元素，可用偏侈量进行微调,可正可负

  • 代码如下：

.list > .item:nth-child(3n + 1) {background-color: red;
}

  • 运行效果

  1. :first-child:选中父元素下的第一个子元素

  • 代码如下：

.list > .item:first-child {background-color: red;
}

  • 运行效果

  1. :last-child:选中父元素下的最后一个子元素

  • 代码如下：

.list > .item:last-child {background-color: red;
}

  • 运行效果

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="form.css" /><link rel="stylesheet" href="fake-status.css" /></head><body><form action=""><fieldset class="login"><legend class="title">用户登录</legend><label for="uname">呢称:</label><input type="text" name="uname" autofocus required /><label for="email">邮箱:</label><input type="email" name="email" required /><label for="tel">电话:</label><input type="tel" name="tel" /><div class="remember"><input type="checkbox" name="remember" id="rem" /><label for="rem">记住我</label></div><button class="submit">提交</button></fieldset></form></body>
</html>

  • 代码中form.css为样式代码，fake-status.css为实例操作代码，样式代码如下：

.login {display: inline-grid;grid: auto-flow / 3em 1fr;gap: 10px 0;padding: 1em;
}
.login input {border: none;border-bottom: thin solid #666;
}
.login .title {text-align: center;
}.login .btn,
.login .remember {grid-column: 2;height: 2.2em;
}
.btn .submit,
.btn .reset {width: 40%;height: 2.2em;
}

链接,表单

  1. :hover: 鼠标悬停

  • 代码举例，鼠标悬停在提交按钮上，改变按钮颜色，鼠标变为小手型。

.login > .submit:hover {cursor: pointer;background-color: seagreen;color: white;
}

  • 运行效果

  1. :enabled: 有效控件

  • 代码举例，改变.login下所有有效控件的边框

.login :enabled {border: solid 5px rebeccapurple;
}

  • 运行效果

  1. :disabled: 禁用控件

  • 代码举例，改变.login下禁用控件的样式。

.login :disabled {background-color: aqua;color: cadetblue;border-color: antiquewhite;
}

  • 运行效果

  1. :checked: 选中控件

  • 代码举例，复选框选中时将标签的文本描红

.login :checked + label {color: red;
}

  • 运行效果

  1. :required: 必选控件

  • 代码举例，改变表单中，所有具有必填属性元素的背景颜色。

.login :required {background-color: yellow;
}

-运行效果

6. :focus: 焦点控件

  • 代码举例，输入框获取焦点后，边框变为红色。

.login :focus {outline: 1px solid red;border-bottom: none;
}

  • 运行效果

  1. :not(): 过滤掉某些元素

  • 代码举例，改变.login下非input元素的背景颜色。

.login :not(input) {background-color: red;
}

  • 运行效果

  1. :empty: 选择页面中为空的元素

  • 代码举例，将表单中，没有内容的元素，用红色标出。

.login :empty {background-color: red;
}

  • 运行效果

关于更多伪类知识请查询 MDN

2. 选择器优先级权重

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

  1. 原子选择器: tag,class,id

  1. 原子选择器权重: tag(1),class(10),id(100)

可简单理解为: 标签是个位, class 是十位, id 是百位

  • 权重示例：

<div class="demo" id="test"><span class="text" id="title">爱你直到永远！</span>
</div>
/* 权重100 */
#title {color: green;
}/* 权重010无法覆盖绿色值 */
.text {color: red;
}/* 权重110，可以覆盖绿色值！ */
#title.text {color: yellow;
}/* 权重020无法覆盖绿色值 */
.demo > .text {color: aqua;
}/* 权重224，为span元素的顶级权重 */
html > body > div#test.demo > span#title.text {color: brown;
}

3. 盒模型

3.1 一切皆"盒子"

  1. 盒子是页面中可见的"矩形区域"

  1. 一个网站由多个盒子布局构成。

3.2 五大属性

  1. width: 宽

  1. height: 高

  1. padding: 内边距

  1. border: 边框

  1. margin: 外边距

  • border

  1. 可见属性

  1. 可设置width,style,color

  • 举例代码

<div class="test"><span>demo</span>
</div>
.test {width: 180px;height: 100px;/* 为每条边框设置不同的颜色 */border-top-width: 2px;border-top-style: solid;border-top-color: red;border-top: 2px solid red;border-right: 2px solid blue;border-bottom: 2px solid green;border-left: 2px solid violet;/* 四条边框相同，可简写 *//* border: 2px solid red; */
}

  • 运行效果

  • padding,margin

  1. 不可见属性

  1. 仅可设置: width

  1. 大多数内置元素都有默认padding/margin

  1. 建议全部重置为 0,以方便自定义布局

  • 若为元素设置四个值的外边距，应当遵循 上、右、下、左，顺时针顺序原则。例如：

.test {width: 180px;height: 100px;/* 为每条边框设置不同的颜色 */border-top-width: 2px;border-top-style: solid;border-top-color: red;border-top: 2px solid red;border-right: 2px solid blue;border-bottom: 2px solid green;border-left: 2px solid violet;/* 四条边框相同，可简写 *//* border: 2px solid red; */margin: 5px 10px 15px 20px;
}

  • 边距查看

  • 两个值的边距设置，第一个为上下，第二个为左右。例如： margin: 5px 10px;

  • 边距查看

  • 三个值，顺序为 第一个值为上，第二个值为左右，第三个值为下。例如：margin: 5px 10px 30px;

  • 边距查看

内边距设置同样如此，在二值和三值的情况下，左右永远在第二个位置。

  • width,height

  1. 默认不包含 padding,border

.test {width: 180px;height: 100px;
}

  • 边距查看

  • box-sizing

  1. box-sizing: 设置盒模型计算边界

  • content-box: 默认值,仅包括内容区

  • 测试：

.test {width: 180px;height: 100px;margin: 5px;padding: 5px;border: solid 2px red;
}

  • 结论

此模式下，盒子大小改变，宽高超出范围不利于计算。

  • border-box: 推荐值,宽高扩展到可视边框

  • 测试：

.test {width: 180px;height: 100px;margin: 5px;padding: 5px;border: solid 2px red;box-sizing: border-box;
}

  • 结论

此模式下，边距往内扩展，盒子大小不变。

  • 通用初始化代码

* {margin: 0;padding: 0;box-sizing: border-box;
}

css基础伪类选择器与选择器权重以及盒子模型的用法演示相关推荐

  1. 使用css伪类选择器,css的伪类选择器的使用

    伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...

  2. html伪类选择器focus,了解CSS :focus-within伪类选择器

    一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...

  3. Css 结构伪类选择器

    目录 Css 结构伪类选择器 结构伪类-公式 Css 结构伪类选择器 在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...

  4. [css] CSS的伪类和伪对象有什么不同？

    [css] CSS的伪类和伪对象有什么不同? 伪类是给当前选中节点添加新样式, 伪对象是给当前选中节点添加伪元素. 伪类选择器使用:,伪对象选择器使用::,因为兼容旧版,所以伪对象使用:也能解析. 个 ...

  5. html css链接伪类大全,什么是css链接伪类？

    什么是css链接伪类?下面本篇文章就来给大家介绍一下css链接伪类是什么?有哪些?有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 什么是css链接伪类? css链接伪类就是css内置 ...

  6. CSS:has () 伪类，:not()伪类

    昨日的chrome 105更新带来了:has()和:modal的支持. chrome更新介绍页 :has () 伪类 :has () 伪类是一个选择器,它指定一个元素,该元素至少有一个与作为参数传递的 ...

  7. CSS :has伪类

    CSS :has伪类 1 概述 2 实例说明 2.1 表单元素前面加* 2.2 拖拽列表 2.3 多层级hover 2.4 评星组件 3 兼容性 1 概述 :has()表示满足一定条件后,就会匹配该元 ...

  8. CSS :active 伪类

    :active -- CSS :active 伪类,适用于一个元素被激活时的样式 语法: :active CSS版本:CSS1 引用网址:http://www.dreamdu.com/css/pseu ...

  9. CSS:hover伪类使用

    CSS:hover伪类使用 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Adobe Dreamwe ...

最新文章

  1. matlab中的方波信号图片_电气信息类专业课程之matlab系统仿真 第十章 DBPSK调制解调器（9）...
  2. Oracle-Materialized View解读
  3. 干货 | 云计算时代携程的网络架构变迁
  4. 初次接触GWT，知识点总括
  5. saltstack中grains简介
  6. 那些前端应该知道的HTTP知识
  7. 安装Visio 2016与原本的office冲突的最终解决方案
  8. (转)区块链：为什么说finchain是下一代金融应用平台
  9. windows10 专利申请客户端CPC
  10. 借助excel工具进行多元线性回归模型的建立及案例分析
  11. 判断单双周java_单双周计算
  12. 用PHPnow运行PHP项目以及PHPnow相关问题的解决
  13. 东南大学计算机esl排名,不是江苏考生，你不会知道，这所被戏称福建的“三本”，有多难考...
  14. JAVA中链表的next解释
  15. np.random.binomial()
  16. PHPMYWIND 图片信息调用
  17. 我就发布个夏泽网注册码
  18. [ CTF ]【天格】战队WriteUp-第六届”蓝帽杯“全国大学生网络安全技能大赛（半决赛）
  19. uni-app开发的微信小程序隐藏返回首页按钮
  20. 00 石锅土鲫鱼项目导语

热门文章

  1. 实现 长链接变 短 链接
  2. 苹果读屏技术--VoiceOver
  3. gulp自动生成精灵图
  4. 一加9pro Color OS 安卓12 安卓13 第三方 twrp 刷入
  5. linux IRQ Management（三）- IRQ Framework
  6. 分析与处理时间序列数据的常用方法总结
  7. 【图像处理】Niblack
  8. 数模E——信号干扰下的超宽带（UWB）精确定位问题
  9. 深度学习中的一些术语和概念
  10. Core Dump调试