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

程序员文章站 2022-06-01 20:18:24

...

伪类选择器

伪是形容词,表示假的, 类,指代权重是 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>