伪类选择器与盒模型属性实例解析,附字体图标引入 - 前端学习

Home > List of blog posts > 伪类选择器与盒模型属性实例解析,附字体图标引入

Blogger Information

Blog 8

fans 0

comment 0

visits 4565

Special Recommendation

More>

Related recommendations

伪类选择器

伪是形容词,表示假的, 类,指代权重是 class 级别，权重大于 tag

结构伪类: 根据元素位置获取元素
状态伪类: 根据状态来获取元素

一. 结构伪类：用于选择子元素,所以应该给它一个查询的起点
实例代码简写：!+ul.list>li*8{item$}
完整代码如下来做解析演示：

<!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>Document</title>
  </head>
  <body>
    <ul class="list">
    <!-- 简写基础上加一个first类来更好的进行演示 -->
      <li class="first">item1</li>
      <li>item2</li>
      <li>item3</li>
      <li>item4</li>
      <li>item5</li>
      <li>item6</li>
      <li>item7</li>
      <li>item8</li>
    </ul>
  </body>
</html>

单个的伪类选择器

如何选择第一个 item，以往选择与伪类选择区别

<style>
  /* 以往操作 */
  .list .first {
    background-color: black;
  }
  /* 伪类操作 */
  .list > li:nth-of-type(1) {
    background-color: violet;
  }
  /* 伪类简化操作 */
  /*注意事项：冒号前面加空格正常显示,冒号后面加空格或者都加空格会不显示，冒号前后不加空格，就是全部继承*/
  .list :nth-first-of-type {
    background-color: violet;
  }
</style>

如何选择最后一个 item

<style>
  .list :nth-last-of-type {
    background-color: rgb(78, 142, 184);
  }
</style>

如何选择任意一个 item
.list > li:nth-of-type(x)
x 是指代某一个，假如这个是 5，那么就是
.list > li:nth-of-type(5)
则代码为

<style>
    .list > li:nth-of-type(5) {
    background-color: red;
        }
</style>

另外选择第 5 个, 相当于倒数第 4 个
可以用倒数选择的伪类:nth-last-of-type

<style>
    .list > li:nth-last-of-type(4) {
    background-color: red;
}
</style>

单个效果图例：

一组的伪类选择器

:nth-of-type(an+b)
1. a: 系数, [0,1,2,...]
2. n: [0,1,2,3,....]
3. b: 偏移量, 从0开始
注: 计算出来的索引,必须是有效, 从1开始

匹配单个的时候 a=0,0 乘任何数都 0,所以可简化,只写偏移量
即：:nth-of-type(b)这个 b=1 的时候选择 1，b=2 的时候选择 2
匹配一组的时候 a=1,1 乘任何数不变, 所以 1 可以不写
即：:nth-of-type(n),这个是选择整组

<style>
  /* 这个是选择整组 */
    .list > li:nth-of-type(n) {
    background-color: red;
    }
  /* 实际使用可以用另外一种 */
   .list > *  {
    background-color: red;
    }
</style>

实际开发过程, 使用 n + b(偏移量)来匹配元素

 /* 匹配第3个子元素加后面的所有兄弟元素 */
 使用n + 3 从3开始的时候选择加以后所有的
<style>
.list > :nth-of-type(n + 3) {
background-color: salmon;
}
</style>

n +3 效果图例：

n + 3 匹配原理：

n: 从0开始取, n+3 匹配的全过程
1. n=0: 0+3=3, 匹配第3个
2. n=1: 1+3=4, 匹配第4个
3. n=2: 2+3=5, 匹配第5个
4. n=3: 3+3=6, 匹配第6个
5. n=4: 4+3=7, 匹配第7个
6. n=5: 5+3=8, 匹配第8个
7. n=6: 6+3=9, 索引越界,匹配失败,结束计算
n+3 => [3,4,5,6,7,8], 匹配到6个

匹配前三个或者最后三个怎么处理?

    匹配前三个使用:nth-of-type(-n + 3)
<style>
  .list > :nth-of-type(-n + 3) {
    background-color: salmon;
  }
</style>
    匹配后三个使用:nth-last-of-type(-n + 3)
<style>
  .list > :nth-last-of-type(-n + 3) {
    background-color: salmon;
  }
</style>

后三个效果图例：

匹配奇数或者偶数
a=2 : 匹配奇偶位置的元素

    <style>
      /* 2n+0: 偶数位元素 */
      .list > :nth-of-type(2n) {
        background-color: lightgreen-;
      }
      /* 2n+1: 奇数位元素 */
      .list > :nth-of-type(2n + 1) {
        background-color: lightgreen-;
      }
      /* 2n简写: even, 2n+1简写: odd  */
      /* 后面加:hover则是鼠标悬停的时候 */
      /* 应用在表格悬停变色比较常用 */
      /* .list :nth-of-type(even):hover {
        background-color: yellow;
      } */
    </style>

二. 状态伪类（表单）

序号	选择器	描述
1	:enabled	有效的,允许提交的表单元素
2	:disabled	禁用的表单元素
3	:checked	选中的表单元素
4	:hover	当鼠标悬浮在元素上方时，向元素添加样式
5	:focus	获取焦点的时候
6	:active	向被激活的元素添加样式
7	:link	向未被访问的链接添加样式
8	:visited	向已被访问的链接添加样式
9	:root	根元素,通常是 html
10	:empty	选择没有任何子元素的元素(含文本节点)
11	:not	排除与选择器参数匹配的元素

字体图标如何引入

一. font-class 引用

第 1 步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./font_icon/iconfont.css" />
第 2 步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-category"></span>
第 3 步：设置字体图标样式:

<style>
  .iconfont.icon-category {
    font-size: 30px;
    color: blue;
  }
</style>

二. Symbol 引用

第 1 步：引入项目下面生成的 symbol 代码：
<script src="./font_icon/iconfont.js"></script>
第 2 步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-category"></use>
</svg>

第 3 步：设置字体图标样式:

<style>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

引入效果图例：

盒模型的 5 个属性

序号	属性	说明
1	width	宽度
2	height	高度
3	border	边框
4	padding	内边距，呼吸区
5	margin	外边距

注：padding 和 margin 是透明的，所以只能设置宽度，但是 border 不是透明的，除了宽度还可以设置样式，前景色等
盒模型实例演示：

    <div class="box"></div>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 10px;
        background-color: violet;
        border: 10px dashed currentColor;
        background-clip: content-box;
        /* 盒模型的四个方向可以单独设置,按顺时针，上,右,下,左
        三个值：上,左右,下；两个值：上下,左右;一个值均等 */
        padding: 20px 10px 15px 5px;
        /* 收缩内容区大小,使用户设置width,height就是盒子的实际大小,以方便计算与布局 */
        /* 使其完成目标：width = width + padding + border = 200px */
        box-sizing: border-box;
      }
    </style>

样式图例：

样式重置的简化通用方案

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

盒模型属性常用单位

序号	单位	说明
1	px	像素,绝对单位,与设备相关,1 英寸=96px
2	em	永远和当前或父级的 font-size 进行绑定
3	rem	永远和 html(根元素)中的 font-size 绑定
4	vw	将视口宽度分为 100 份, 1vw = 1/100,响应式
5	vh	将视口高宽分为 100 份, 1vh = 1/100,响应式

em 和 rem 区别实例演示

<!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>Document</title>
  </head>
  <body>
    <div class="box1">em</div>
    <div class="box2">rem</div>
  </body>
</html>
<style>
  * {
    font-size: 10px;
  }
  /* 当前10em=500px */
  .box1 {
    font-size: 50px;
    width: 10em;
  }
  /* 当前10rem=100px */
  .box2 {
    width: 10rem;
  }
</style>

em样式图例说明：

rem样式图例说明：

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

1 comments

h'h 2021-12-27 15:35:31

总结得好！！！

1 floor

Author's latest blog post

html基础：Emmet常用语法与布局标签实例

2021-12-22 14:08:41