CSS常用伪类选择器的总结与盒子模型的简单介绍

CSS伪类选择器通常分为:结构伪类、状态伪类

结构伪类

下面我们来介绍下几种常见结构伪类选择器

1.1nth-of-type(an+b)

  1. nth-of-type(an+b) 多用于奇、偶分类或头、尾部的选择!
  2. an+b)公式:只有在结果大于"0"时,才是有效值!
  3. a:为设定的规则系数
  4. n:为从"0"开始递增,进行 + "1" 运算的数列
  5. b:为偏移量,可为任意整数
  1. ————————————————————————————
  2. 下面我们用实例子展示这几种情况
  3. ————————————————————————————

  1. 选择奇数时我们把(an+b)换成了(2n+1 实际运用可以奇数也可以用"odd"
  2. 那么它的计算结果就是:
  3. "n=0"时,"2n+1=1"
  4. "n=1"时,"2n+1=3"
  5. "n=2"时,"2n+1=5"
  6. "n=3"时,"2n+1=7"
  7. ...再向后计算超出了我们示例的标签数。

  1. 选择偶数时我们把(an+b)换成了(2n+0),代码中我们把"0"省略了,也就是(2n 实际运用可以偶even数也可以用""
  2. 那么它的计算结果就是:
  3. "n=0"时,"2n=0" an+b)的计算结果只有大于"0"时,才生效
  4. "n=1"时,"2n=2"
  5. "n=2"时,"2n=4"
  6. "n=3"时,"2n=6"
  7. "n=4"时,"2n=8"
  8. ...再向后计算超出了我们示例的标签数。

  1. 选择前三行时我们把(an+b)换成了(-n+3),这里的完整写法是(-1n+3),我们把"1"省去,不影响计算结果。
  2. 那么它的计算结果就是:
  3. "n=0"时,"-n+3=3"
  4. "n=1"时,"-n+3=2"
  5. "n=2"时,"-n+3=1"
  6. ...再向后计算结果小于等于"0"了,不是有效值。

  1. 选择后三行时我们把nth-of-type(-n+3)的中间添加了"last",变成了"nth-last-of-type(-n+3)","last"的英文意思是"末尾",整个代码的意思就是末尾处向上反着开始。
  2. 那么它的计算结果就是:
  3. "n=0"时,"-n+3=3"
  4. "n=1"时,"-n+3=2"
  5. "n=2"时,"-n+3=1"
  6. ...再向后计算结果小于等于"0"了,不是有效值。
  1. ———————————————————————————————————————————————————————
  2. 下面我们接着介绍几种 "nth-of-type(an+b)" 的延伸伪类选择器
  3. ———————————————————————————————————————————————————————

  1. 从上图中我们发现:
  2. :first-of-type选中了第一行
  3. :first-of-type选中了最后一行
  4. 那么"first-of-type"等效于"nth-of-type(1)"
  5. "last-of-type"等效于"nth-last-of-type(1)"

下面我们着重说一下:nth-of-type(an+b) 和 nth-child(an+b) 的区别

  1. 从上图我们可以看出"nth-of-type(3)"选中的是每个盒子内的第三个"<li>"元素标签

  1. 从上图我们可以看出"nth-child(3)"选中的是每个盒子内的第三个元素标签,
  2. 这里我们大家应该注意:使用"nth-child"的时候是只要包裹在这个元素标签内的所有标签(元素标签名不需要相同),去选中第几个,
  3. 而使用"nth-of-type"时,选择的是,标签名相同的第几个!

状态伪类

  1. 状态伪类,我们可以从字面意思上去理解,就是一个元素标签处于什么样的状态?
  2. 被选中、被禁用、这些是种状态,被鼠标滑过、被鼠标点击这些也是状态,
  1. ——————————————————————
  2. 下面我们展示一个状态伪类
  3. ——————————————————————

  1. 从上图中我们可以看出,带有选中"checked"属性的男前面的圆圈明显要比不带有选中"checked"属性的女大很多,我们就是通过"checked"这个属性选中了男这个"input"元素标签。
  1. ————————————————
  2. 附上CSS全部伪类表
  3. ————————————————
  1. —————————————————————————————————————————————————————————————————————————
  2. 下载地址:https://img.php.cn/upload/image/163/169/949/1657266183876549.png
  3. —————————————————————————————————————————————————————————————————————————

盒子模型


  1. 通常情况:盒子模型有下面几条属性
  2. width: 宽度
  3. height: 高度
  4. padding: 内边距
  5. margin: 外边距
  6. border: 边框线
  7. box-sizing: 统一盒子模型在各浏览器中的样式

盒子模型的常用属性

属性说明
widthwidth 属性定义盒子模型的宽度 例:width: 400px;
heightheight 属性定义盒子模型的高度 例:height: 200px;
paddingpadding 属性定义盒子模型的内边距 例:padding: 40px;
marginmargin 属性定义盒子模型的外边距 例:margin: 10px 10px;
borderborder 属性定义盒子模型的外边距 例:border: 5px solid red;
box-sizingbox-sizing 属性它的功能是让盒子模型在各个浏览器中采用同样的规则 例:box-sizing: border-box;

下面我们介绍一下 padding 和 margin 以 padding 例

示例说明
padding: 20px;表示上、下、左、右四个方向的内边距一样,都是20像素
padding: 20px 10px;表示上、下内边距一样是20像素,左、右内边距一样是10像素
padding: 20px 10px 30px;表示上内边距是20像素,左、右内边距一样为10像素,下内边距为30像素
padding: 10px 20px 30px 40px;表示上、下、左、右的内边距各不相同,它们分别是10像素、20像素、30像素、40像素

更多相关文章

  1. CSS盒子模型
  2. css伪类与盒模型对比写法
  3. 2022年0707结构伪类与状态伪类与盒模型常用属性
  4. Android(安卓)TV 智能电视/盒子 APP 开发焦点控制 两种方法实例
  5. Android(安卓)学习系列 - 线程模型
  6. Android模仿通讯录
  7. Android的进程,线程模型
  8. [转][Android研究手记1]基本概念和模型
  9. 认识Android中的MVP设计模式

随机推荐

  1. Android 插件安装 和MyEclipse的Windows
  2. 【Android自助餐】Handler消息机制完全解
  3. [置顶] Android如何选择HttpURLConnectio
  4. 构建Android的交叉编译器、用NDK编译移植
  5. Android自定义权限
  6. Android UI线程和非UI线程
  7. 深度解析Android中字体设置
  8. 基于Android官方Paging Library的Recycle
  9. [置顶] Android(安卓)编码规范
  10. Android 升级SDK管理器版本到20,安装Andro