Home > List of blog posts > CSS 基础(伪类选择器、字体图标、盒模型)

Blogger Information

Blog 119

fans 3

comment 1

visits 94618

Special Recommendation

More>

Related recommendations

CSS 基础(伪类选择器、字体图标、盒模型)

1. 伪类选择器

1.1 不分组匹配(不能区分元素种类，只根据顺序)

序号	选择器	描述	举例
1	`:first-child`	匹配第一个子元素	`div :first-child`
2	`:last-child`	匹配最后一个子元素	`div :last-child`
3	`:only-child`	选择元素的唯一子元素	`div :only-child`
4	`:nth-child(n)`	匹配任意位置的子元素	`div :nth-child(n)`
5	`:nth-last-child(n)`	匹配倒数任意位置的子元素	`div :nth-last-child(n)`

1.2 分组匹配

选择一个，参数是具体数字，():`第个`
选择一组，参数是公式，(a * n + b): 按条件循环着匹配

序号	选择器	描述	举例
1	`:first-of-type`	匹配按类型分组后的第一个子元素	`div :first-of-type`
2	`:last-of-type`	匹配按类型分组后的最后一个子元素	`div :last-of-type`
3	`:only-of-type`	匹配按类型分组后的唯一子元素	`div :only-of-type`
4	`:nth-of-type()`	匹配按类型分组后的任意位置的子元素	`div :nth-of-type(n)`
5	`:nth-last-of-type()/:nth-of-type(-n)`	匹配按类型分组后倒数任意位置的子元素	`div :nth-last-of-type(n)`
6	`:nth-of-type(2n)/even`	匹配按类型分组后偶数位置的子元素	`div :nth-last-of-type(n)`
7	`:nth-of-type(2n+1)/odd`	匹配按类型分组后奇数位置的子元素	`div :nth-last-of-type(n)`

1.3 其它伪类

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

CSS 选择器应用实例

<!--伪类选择器-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS伪类选择器:参数说明</title>
    <style>
      /* 参数: 
        :nth-of-type(an+b)
        1. a: 系数, [0,1,2,...]
        2. n: 每次都从0开始取, 到an+b超出元素索引
        3. b: 偏移量, 从0开始
        注: 计算出来的索引,必须是有效, 从1开始
        */
      /* 匹配偶数: 2n + 0
        n = 0, ==> 2 * 0 = 0; 第0个元素，参数无效
        n = 1, ==> 2 * 1 = 2; 第2个元素
        n = 2, ==> 2 * 2 = 4; 第4个元素
        n = 3, ==> 2 * 3 = 6; 第6个元素
        n = 4, ==> 2 * 4 = 8; 第8个元素
        n = 5, ==> 2 * 5 = 10; 元素索引越界，结束匹配
        */
      div > :nth-of-type(2n) {
        background-color: #f30909;
      }
      /* 匹配奇数: 2n + 1
        n = 0, ==> 2 * 0 + 1 = 1; 第1个元素，参数无效
        n = 1, ==> 2 * 1 + 1 = 3; 第3个元素
        n = 2, ==> 2 * 2 + 1 = 5; 第5个元素
        n = 3, ==> 2 * 3 + 1 = 7; 第7个元素
        n = 4, ==> 2 * 4 + 1 = 9; 元素索引越界，结束匹配
        */
      div > :nth-of-type(2n + 1) {
        background-color: #09f357;
      }
      /* 匹配第三个后所有: 1n + 3
        n = 0, ==> 1 * 0 + 3 = 3; 第1个元素，参数无效
        n = 1, ==> 1 * 1 + 3 = 4; 第3个元素
        n = 2, ==> 1 * 2 + 3 = 5; 第5个元素
        n = 3, ==> 1 * 3 + 3 = 6; 第7个元素
        n = 4, ==> 1 * 4 + 3 = 7; 元素索引越界，结束匹配
        */
      div > :nth-of-type(n + 3) {
        font-size: 20px;
        color: #f7f30b;
      }
      /* 匹配第3、6、9、12个: 3n + 3
        n = 0, ==> 3 * 0 + 3 = 3; 第1个元素，参数无效
        n = 1, ==> 3 * 1 + 3 = 6; 第3个元素
        n = 2, ==> 3 * 2 + 3 = 9; 第5个元素
        n = 3, ==> 3 * 3 + 3 = 12; 第7个元素
        n = 4, ==> 3 * 4 + 3 = 15; 元素索引越界，结束匹配
        */
      div > :nth-of-type(3n + 3) {
        border: 2px solid #0a0a0a;
      }
      /* 匹配倒数第二个起之前所有: 1n + 2
        n = 0, ==> 1 * 0 + 2 = 2; 倒数第2个元素
        n = 1, ==> 1 * 1 + 2 = 3; 倒数第3个元素
        n = 2, ==> 1 * 2 + 2 = 4; 倒数第4个元素
        n = 3, ==> 1 * 3 + 2 = 5; 倒数第5个元素
        n = 4, ==> 1 * 4 + 2 = 6; 倒数第6个元素
        n = 4, ==> 1 * 4 + 2 = 7; 倒数第7个元素
        n = 4, ==> 1 * 4 + 2 = 8; 倒数第8个元素
        n = 4, ==> 1 * 4 + 2 = 9; 倒数第9，元素索引越界，结束匹配
        */
      div > :nth-last-of-type(n + 2) {
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="item">
      <div>item1</div>
      <div>item2</div>
      <div>item3</div>
      <div>item4</div>
      <div>item5</div>
      <div>item6</div>
      <div>item7</div>
      <div>item8</div>
      <div>item9</div>
      <div>item10</div>
      <div>item11</div>
      <div>item12</div>
      <div>item13</div>
      <div>item14</div>
    </div>
  </body>
</html>

显示效果

2.字体图标引用说明

登陆阿里字体图标官网: https://www.iconfont.cn/
挑选需要的字体图标，加入购物车
打开购物车选择下载代码；选择添加到项目再下载可以方便以后修改项目中的字体图标
解压下载好的代码，复制到项目
打开下载项目文件夹中的说明文件；文件中有引入字体图标的方法：Unicode、Font class、Symbol
一般使用 Font class 比较直观
引入字体图标样式 CSS 文件

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="font_icon/iconfont.css">
    <script src="font_icon/iconfont.js"></script>
    <style>
        .iconfont, .icon{
            color: red;
            font-size: 38px;
        }
    </style>
    <title>字体图标引用</title>
</head>
<body>
    <!-- 使用Font class引入字体图标 -->
    <span class="iconfont icon-data-view"></span>
    <span class="iconfont icon-favorite"></span>
    <span class="iconfont icon-email"></span>
    <!-- 使用Unicode引入字体图标 -->
    <span class="iconfont">&#xe66e</span>
    <span class="iconfont">&#xe66b</span>
    <!-- 引入项目下面生成的 symbol 代码 -->
    <!-- 加入通用 CSS 代码（引入一次就行） -->
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-email"></use>
    </svg>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-data-view"></use>
    </svg>
</body>
</html>

显示效果

3.盒模型

3.1 盒模型常用属性

序号	属性	备注
1	`width`	盒模型宽度
2	`height`	盒模型高度
3	`border`	盒模型边框
4	`padding`	盒模型内边距，透明只有宽度可设置
5	`margin`	盒模型外边距

<!DOCTYPE html>
<html lang="en">
  <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>
    <style>
      /* 样式重置的简化通用方案 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
      .box {
        background-color: #7ef8d0;
        box-sizing: border-box;
        /* 背景色裁切 */
        background-clip: content-box;
        width: 180px; /*10 + 5 + 150 + 5 + 10 = 180*/
        height: 180px;
        border: 10px dashed red;
        padding: 18px;
        margin-top: 28px;
        /* 确保设置盒子宽高是盒子不被撑开，设置padding、margin前都要设置这个属性 */
        /* padding、margin 值设置，上 右 下 左的顺序，第2个表示左右 */
        /* 四值 , 顺时针 */
        padding: 5px 10px 15px 20px;
        /* 三值 , 中间表示左右*/
        padding: 5px 10px 15px;
        /* 双值: 第1个上下,第2个左右 */
        padding: 5px 10px;
        /* 单值, 四个方向全一样 */
        padding: 5px;
        /* padding: 是透明的,只有宽度可以设置 */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

显示效果

3.1 盒模型属性常用单位

序号	单位	备注
1	`px`	绝对单位: px , 1in = 96px
2	`em`	和当前或父级的 font-size 进行绑定，1em = 当前字号
3	`rem`	和 html(根元素)中的 font-size 绑定，1rem = 根元素字号
4	`vw`	宽度视口，使用于响应式布局，1vw = 1/100
5	`vh`	高度视口，使用于响应式布局，1vh = 1/100

<!DOCTYPE html>
<html lang="en">
  <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>
    <style>
      /* 样式重置的简化通用方案 */
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        font-size: 10px;
      }
      .box1 {
        background-color: #7ef8d0;
        width: 180px;
        height: 100px;
      }
      .box2 {
        background-color: #220af5;
        font-size: 20px;
        width: 10em;
        height: 20em;
      }
      .box3 {
        background-color: #0af551;
        width: 10rem;
        height: 20rem;
      }
      .box4 {
        background-color: #f50aa7;
        width: 10vw;
        height: 20vh;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2">当前字号</div>
    <div class="box3">根元素自豪</div>
    <div class="box4"></div>
  </body>
</html>

显示效果

总结

第一次接触伪类选择器的时候觉得很难，基本靠硬记和逐个尝试了解清楚参数远离后瞬间就明白了。

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

0 comments

Author's latest blog post

grid布局学习笔记

2020-04-15 03:09:38