search

博客列表 >CSS 基础(伪类选择器、字体图标、盒模型)

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

赵大叔
赵大叔原创
2021年12月25日 23:31:16526浏览

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 选择器应用实例

  1. <!--伪类选择器-->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>CSS伪类选择器:参数说明</title>
  8.     <style>
  9.       /* 参数: 
  10.         :nth-of-type(an+b)
  11.         1. a: 系数, [0,1,2,...]
  12.         2. n: 每次都从0开始取, 到an+b超出元素索引
  13.         3. b: 偏移量, 从0开始
  14.         注: 计算出来的索引,必须是有效, 从1开始
  15.         */
  17.       /* 匹配偶数: 2n + 0
  18.         n = 0, ==> 2 * 0 = 0; 第0个元素，参数无效
  19.         n = 1, ==> 2 * 1 = 2; 第2个元素
  20.         n = 2, ==> 2 * 2 = 4; 第4个元素
  21.         n = 3, ==> 2 * 3 = 6; 第6个元素
  22.         n = 4, ==> 2 * 4 = 8; 第8个元素
  23.         n = 5, ==> 2 * 5 = 10; 元素索引越界，结束匹配
  24.         */
  25.       div > :nth-of-type(2n) {
  26.         background-color: #f30909;
  27.       }
  29.       /* 匹配奇数: 2n + 1
  30.         n = 0, ==> 2 * 0 + 1 = 1; 第1个元素，参数无效
  31.         n = 1, ==> 2 * 1 + 1 = 3; 第3个元素
  32.         n = 2, ==> 2 * 2 + 1 = 5; 第5个元素
  33.         n = 3, ==> 2 * 3 + 1 = 7; 第7个元素
  34.         n = 4, ==> 2 * 4 + 1 = 9; 元素索引越界，结束匹配
  35.         */
  36.       div > :nth-of-type(2n + 1) {
  37.         background-color: #09f357;
  38.       }
  40.       /* 匹配第三个后所有: 1n + 3
  41.         n = 0, ==> 1 * 0 + 3 = 3; 第1个元素，参数无效
  42.         n = 1, ==> 1 * 1 + 3 = 4; 第3个元素
  43.         n = 2, ==> 1 * 2 + 3 = 5; 第5个元素
  44.         n = 3, ==> 1 * 3 + 3 = 6; 第7个元素
  45.         n = 4, ==> 1 * 4 + 3 = 7; 元素索引越界，结束匹配
  46.         */
  47.       div > :nth-of-type(n + 3) {
  48.         font-size: 20px;
  49.         color: #f7f30b;
  50.       }
  52.       /* 匹配第3、6、9、12个: 3n + 3
  53.         n = 0, ==> 3 * 0 + 3 = 3; 第1个元素，参数无效
  54.         n = 1, ==> 3 * 1 + 3 = 6; 第3个元素
  55.         n = 2, ==> 3 * 2 + 3 = 9; 第5个元素
  56.         n = 3, ==> 3 * 3 + 3 = 12; 第7个元素
  57.         n = 4, ==> 3 * 4 + 3 = 15; 元素索引越界，结束匹配
  58.         */
  59.       div > :nth-of-type(3n + 3) {
  60.         border: 2px solid #0a0a0a;
  61.       }
  62.       /* 匹配倒数第二个起之前所有: 1n + 2
  63.         n = 0, ==> 1 * 0 + 2 = 2; 倒数第2个元素
  64.         n = 1, ==> 1 * 1 + 2 = 3; 倒数第3个元素
  65.         n = 2, ==> 1 * 2 + 2 = 4; 倒数第4个元素
  66.         n = 3, ==> 1 * 3 + 2 = 5; 倒数第5个元素
  67.         n = 4, ==> 1 * 4 + 2 = 6; 倒数第6个元素
  68.         n = 4, ==> 1 * 4 + 2 = 7; 倒数第7个元素
  69.         n = 4, ==> 1 * 4 + 2 = 8; 倒数第8个元素
  70.         n = 4, ==> 1 * 4 + 2 = 9; 倒数第9，元素索引越界，结束匹配
  71.         */
  72.       div > :nth-last-of-type(n + 2) {
  73.         margin-left: 20px;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <div class="item">
  79.       <div>item1</div>
  80.       <div>item2</div>
  81.       <div>item3</div>
  82.       <div>item4</div>
  83.       <div>item5</div>
  84.       <div>item6</div>
  85.       <div>item7</div>
  86.       <div>item8</div>
  87.       <div>item9</div>
  88.       <div>item10</div>
  89.       <div>item11</div>
  90.       <div>item12</div>
  91.       <div>item13</div>
  92.       <div>item14</div>
  93.     </div>
  94.   </body>
  95. </html>

显示效果

2.字体图标引用说明

  • 登陆阿里字体图标官网: https://www.iconfont.cn/
  • 挑选需要的字体图标，加入购物车
  • 打开购物车选择下载代码；选择添加到项目再下载可以方便以后修改项目中的字体图标

  • 解压下载好的代码，复制到项目
  • 打开下载项目文件夹中的说明文件；文件中有引入字体图标的方法：Unicode、Font class、Symbol
  • 一般使用 Font class 比较直观
  • 引入字体图标样式 CSS 文件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="font_icon/iconfont.css">
  8.     <script src="font_icon/iconfont.js"></script>
  9.     <style>
  10.         .iconfont, .icon{
  11.             color: red;
  12.             font-size: 38px;
  13.         }
  14.     </style>
  15.     <title>字体图标引用</title>
  16. </head>
  17. <body>
  19.     <!-- 使用Font class引入字体图标 -->
  20.     <span class="iconfont icon-data-view"></span>
  21.     <span class="iconfont icon-favorite"></span>
  22.     <span class="iconfont icon-email"></span>
  24.     <!-- 使用Unicode引入字体图标 -->
  25.     <span class="iconfont">&#xe66e</span>
  26.     <span class="iconfont">&#xe66b</span>
  28.     <!-- 引入项目下面生成的 symbol 代码 -->
  29.     <!-- 加入通用 CSS 代码（引入一次就行） -->
  31.     <svg class="icon" aria-hidden="true">
  32.         <use xlink:href="#icon-email"></use>
  33.     </svg>
  34.     <svg class="icon" aria-hidden="true">
  35.         <use xlink:href="#icon-data-view"></use>
  36.     </svg>
  38. </body>
  39. </html>

显示效果

3.盒模型

3.1 盒模型常用属性

序号 属性 备注
1 width 盒模型宽度
2 height 盒模型高度
3 border 盒模型边框
4 padding 盒模型内边距，透明只有宽度可设置
5 margin 盒模型外边距 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>盒模型的属性</title>
  8.     <style>
  9.       /* 样式重置的简化通用方案 */
  10.       * {
  11.         padding: 0;
  12.         margin: 0;
  13.         box-sizing: border-box;
  14.       }
  15.       .box {
  16.         background-color: #7ef8d0;
  17.         box-sizing: border-box;
  18.         /* 背景色裁切 */
  19.         background-clip: content-box;
  20.         width: 180px; /*10 + 5 + 150 + 5 + 10 = 180*/
  21.         height: 180px;
  22.         border: 10px dashed red;
  23.         padding: 18px;
  24.         margin-top: 28px;
  25.         /* 确保设置盒子宽高是盒子不被撑开，设置padding、margin前都要设置这个属性 */
  27.         /* padding、margin 值设置，上 右 下 左的顺序，第2个表示左右 */
  28.         /* 四值 , 顺时针 */
  29.         padding: 5px 10px 15px 20px;
  31.         /* 三值 , 中间表示左右*/
  32.         padding: 5px 10px 15px;
  34.         /* 双值: 第1个上下,第2个左右 */
  35.         padding: 5px 10px;
  37.         /* 单值, 四个方向全一样 */
  38.         padding: 5px;
  40.         /* padding: 是透明的,只有宽度可以设置 */
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div class="box"></div>
  46.   </body>
  47. </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 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>盒模型的属性</title>
  8.     <style>
  9.       /* 样式重置的简化通用方案 */
  10.       * {
  11.         padding: 0;
  12.         margin: 0;
  13.         box-sizing: border-box;
  14.         font-size: 10px;
  15.       }
  17.       .box1 {
  18.         background-color: #7ef8d0;
  19.         width: 180px;
  20.         height: 100px;
  21.       }
  22.       .box2 {
  23.         background-color: #220af5;
  24.         font-size: 20px;
  25.         width: 10em;
  26.         height: 20em;
  27.       }
  28.       .box3 {
  29.         background-color: #0af551;
  30.         width: 10rem;
  31.         height: 20rem;
  32.       }
  33.       .box4 {
  34.         background-color: #f50aa7;
  35.         width: 10vw;
  36.         height: 20vh;
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <div class="box1"></div>
  42.     <div class="box2">当前字号</div>
  43.     <div class="box3">根元素自豪</div>
  44.     <div class="box4"></div>
  45.   </body>
  46. </html>

显示效果


总结

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

上一条：伪类选择器和盒模型下一条：CSS 样式来源、选择器和权重复习
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多