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 盒模型常用属性

序号属性备注
1width盒模型宽度
2height盒模型高度
3border盒模型边框
4padding盒模型内边距，透明只有宽度可设置
5margin盒模型外边距
  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 盒模型属性常用单位

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

显示效果


总结

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

更多相关文章

  1. 浅谈Android五大布局
  2. Android(安卓)AutoCompleteTextView动态自动补全
  3. Android中常用的五种布局方式:FrameLayout
  4. Android(安卓)五大布局
  5. Android商城购物车页面实现和逻辑实现
  6. 浅谈Android五大布局
  7. Android(安卓)API Demos学习(1) - Hello World
  8. Android(安卓)背景透明度设置和设置GridView元素间距
  9. [androidUI]一些布局

随机推荐

  1. ITIL 4：服务目录管理
  2. 年末最新整理：阿里、腾讯、字节、华为、百
  3. 消息队列为什么说它像漏斗？
  4. 年底报表做到哭泣？学会Excel融合分析，让你
  5. Android如何获取系统高度、标题栏和状态
  6. COW奶牛！Copy On Write机制了解一下
  7. 2021各公司春招求职上岸大礼包! 春招一次
  8. JavaWeb前端框架之BootStrap基础知识
  9. 3.docker网络模式，桥接模式
  10. 写博客的一些感想和想对读者说的话