CSS 备忘清单

这是一份关于 CSS 优点的快速参考备忘单，列出了选择器语法、属性、单位和其他有用的信息

入门

介绍

CSS 功能丰富，不仅仅是布局页面

1
2
3
4
5
<link
  href="./path/to/stylesheet/style.css"
  rel="stylesheet"
  type="text/css"
>

内部样式表 <style>

1
2
3
4
5
<style>
  body {
    background-color: linen;
  }
</style>

内联样式 style

1
2
3
4
5
6
<h2 style="text-align: center;">
  居中文本
</h2>
<p style="color: blue; font-size: 18px;">
  蓝色，18像素文本
</p>

添加 class 类

1
2
<div class="classname"></div>
<div class="class1 ... classn"></div>

支持一个元素上的多个类

!important

1
2
3
.post-title {
    color: blue !important;
}

覆盖所有以前的样式规则

选择器

1
2
3
4
h1 { } 
#job-title { }
div.hero { }
div > p { }

查看: CSS 选择器

文本颜色

1
2
3
4
color: #2a2aff;
color: green;
color: rgb(34, 12, 64, 0.6);
color: hsla(30 100% 50% / 0.6);

查看: Colors

背景

1
2
3
background-color: blue;
background-image: url("nyan-cat.gif");
background-image: url("../image.png");

查看: Backgrounds

字体

1
2
3
4
5
.page-title {
  font-weight: bold;
  font-size: 30px;
  font-family: "Courier New";
}

查看: Fonts

定位

1
2
3
4
5
.box {
  position: relative;
  top: 20px;
  left: 20px;
}

另见: Position

动画

1
2
animation: 300ms linear 0s infinite;
animation: bounce 300ms linear infinite;

查看: Animation

注释

1
2
3
/* 这是一行注释 */
/* 这是
   多行注释 */

Flex 布局

1
2
3
4
5
6
7
8
div {
  display: flex;
  justify-content: center;
}
div {
  display: flex;
  justify-content: flex-start;
}

查看: Flexbox | Flex Tricks

Grid 布局

1
2
3
4
5
6
7
8
9
#container {
  display: grid;
s  grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

查看: Grid Layout

变量和计数器

1
2
3
4
5
6
7
8
9
counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;
:root {
  --bg-color: brown;
}
element {
  background-color: var(--bg-color);
}

查看: 动态内容

CSS 选择器

示例

组选择器

1
2
3
h1, h2 {
    color: red;
}

链选择器

1
2
3
h3.section-heading {
    color: blue;
}

属性选择器

1
2
3
div[attribute="SomeValue"] {
    background-color: red;
}

第一个子选择器

1
2
3
p:first-child {
    font-weight: bold;
}

无子选择器

1
2
3
4
5
.box:empty {
  background: lime;
  height: 80px;
  width: 80px;
}

基础

选择器 说明
* 所有元素
div 所有 div 标签
.classname 具有类的所有元素
#idname 带 ID 的元素
div,p 所有 div 和段落
#idname * #idname 中的所有元素

另见: 元素 / 类 / ID / 通配 选择器

组合器

选择器 说明
div.classname 具有特定类名的 div
div#idname 具有特定 ID 的 div
div p div 中的所有段落
div > p 父元素是 div 的 P 标签
div + p div 之后的第一个同级 P 标签
div ~ p div 之后所有的同级 P 标签

另见: 相邻兄弟 / 通用兄弟 / 子 选择器

属性选择器

选择器 说明
a[target] 带有 target 属性 #
a[target="_blank"] 在新标签中打开 #
a[href^="/index"] 以 /index 开头 #
[class|="chair"] 以chair开头 #
[class*="chair"] 包含chair #
[title~="chair"] 包含单词 chair #
a[href$=".doc"] 以 .doc 结尾 #
[type="button"] 指定类型 #

另见: 属性选择器

用户操作伪类

选择器 说明
a:link 链接正常 #
a:active 链接处于点击状态 #
a:hover 鼠标悬停链接 #
a:visited 访问链接 # 
1
2
3
4
5
6
7
8
/* 未访问链接 */
a:link { color: blue; }        
/* 已访问链接 */
a:visited { color: purple; }   
/* 用户鼠标悬停 */
a:hover { background: yellow; }
/* 激活链接 */
a:active { color: red; }

伪类

选择器 说明
p::after 在 p 之后添加内容 #
p::before 在 p 之前添加内容 #
p::first-letter p中的第一个字母 #
p::first-line p 中的第一行 #
::selection 由用户选择 #
::placeholder 占位符 属性 #
:root 文档根元素 #
:target 突出显示活动锚点 #
div:empty 没有子元素的元素 #
p:lang(en) 带有 en 语言属性的 P #
:not(span) 不是跨度的元素 #
:host shadowDOM 中选择自定义元素 #
::backdrop 处于全屏模式的元素样式 #
::marker li 项目符号或者数字 #
::file-selector-button type=”file” input 按钮 #

输入伪类

选择器 说明
input:checked 检查 input #
input:disabled 禁用 input #
input:enabled 启用的 input #
input:default 有默认值的元素 #
input:blank 空的输入框 #
input:focus input 有焦点 #
input:in-range 范围内的值 #
input:out-of-range input 值超出范围 #
input:valid input 有效值 #
input:invalid input 无效值 #
input:optional 没有必需的属性 #
input:required 带有必需属性的 input #
input:read-only 具有只读属性 #
input:read-write 没有只读属性 #
input:indeterminate 带有 indeterminate 状态 #

结构伪类

选择器 说明
p:first-child 第一个孩子 #
p:last-child 最后一个孩子 #
p:first-of-type 第一个 p 类型的元素 #
p:last-of-type 某种类型的最后一个 #
p:nth-child(2) 其父母的第二个孩子 #
p:nth-child(3n42) Nth-child(an + b) 公式 #
p:nth-last-child(2) 后面的二孩 #
p:nth-of-type(2) 其父级的第二个 p #
p:nth-last-of-type(2) …从后面 #
p:only-of-type 其父级的唯一性 #
p:only-child 其父母的唯一孩子 #
:is(header, div) p 可以选择的元素 #
:where(header, div) p 与 :is 相同 #
a:has(> img) 包含 img 元素的 a 元素 #
::first-letter 第一行的第一个字母 #
::first-line 第一行应用样式 #

CSS 字体

属性

属性 说明
font-family: 字体族名或通用字体族名 #
font-size: 字体的大小 #
letter-spacing: 文本字符的间距 #
line-height: 多行文本间距 #
font-weight: 粗细程度 #
font-style: 字体样式 #
text-decoration: 文本的修饰线外观 #
text-align: 相对它的块父元素对齐 #
text-transform: 指定文本大小写 #

另见: Font

速记

1
2
3
font: italic    400     14px    /     1.5        sans-serif
      ┈┈┬┈┈┈    ┈┬┈     ┈┬┈┈          ┈┬┈        ┈┬┈┈┈┈┈┈┈┈
       样式      粗细    大小(必需的)    行高        字体(必需的)

示例

1
2
3
font-family: Arial, sans-serif;
font-size: 12pt;
letter-spacing: 0.02em;

大小写

1
2
3
4
5
6
7
8
div {
  /* 首字母大写 Hello */
  text-transform: capitalize;
  /* 字母大写 HELLO */
  text-transform: uppercase;
  /* 字母小写 hello */
  text-transform: lowercase;
}

@font-face

1
2
3
4
@font-face {
  font-family: 'Glegoo';
  src: url('../Glegoo.woff');
}

CSS 颜色

命名颜色

1
2
3
4
color: red;
color: orange;
color: tan;
color: rebeccapurple;

更多标准颜色名称

十六进制颜色

1
2
3
4
color: #090;
color: #009900;
color: #090a;
color: #009900aa;

rgb() 颜色

1
2
3
4
5
6
color: rgb(34, 12, 64, 0.6);
color: rgba(34, 12, 64, 0.6);
color: rgb(34 12 64 / 0.6);
color: rgba(34 12 64 / 0.3);
color: rgb(34.0 12 64 / 60%);
color: rgba(34.6 12 64 / 30%);

HSL 颜色

1
2
3
4
5
6
color: hsl(30, 100%, 50%, 0.6);
color: hsla(30, 100%, 50%, 0.6);
color: hsl(30 100% 50% / 0.6);
color: hsla(30 100% 50% / 0.6);
color: hsl(30.0 100% 50% / 60%);
color: hsla(30.2 100% 50% / 60%);

其它

1
2
3
4
5
color: inherit;
color: initial;
color: unset;
color: transparent;
color: currentcolor; /* 关键字 */

全局值

1
2
3
4
/* 全局值 */
color: inherit;
color: initial;
color: unset;

CSS 背景

属性

属性 说明
background: (速记)
background-color: 查看: Colors
background-image: 一个或者多个背景图像
background-position: 背景图片设置初始位置
background-size: 背景图片大小
background-clip: 背景(图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面
background-repeat: 图像重复方式
background-attachment: scroll/fixed/local

速记

1
2
3
4
background: #ff0   url(a.jpg)   left     top    /  100px auto   no-repeat   fixed;
            #abc   url(b.png)   center   center /  cover        repeat-x    local;
            ┈┬┈┈    ┈┬┈┈┈┈┈┈┈   ┈┬┈┈     ┈┬┈       ┈┈┬┈┈┈┈┈┈┈   ┈┈┬┈┈┈┈┈┈   ┈┈┬┈┈┈
            颜色     图片         位置x    位置x       图片大小     图像重复方式  位置是在视口内固定

示例

1
2
3
4
5
6
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background: url(img_man.jpg) no-repeat center;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%,
  rgba(13,232,230,1) 35%,
  rgba(0,212,255,1) 100%);

CSS 盒子模型

最大值/最小值

1
2
3
4
.column {
  max-width: 200px; /* 最大宽度 200 像素 */
  width: 500px;     /* 宽度 500 像素 */
}

另见: max-width / min-width / max-height / min-height

边距/补白

1
2
3
4
.block-one {
  margin: 20px;  /* 边距 20 像素 */
  padding: 10px; /* 补白 10 像素 */
}

另见: 边距(margin) / 补白(padding)

Box-sizing

1
2
3
4
.container {
  /* 设置的边框和补白的值是包含在 width 内的 */
  box-sizing: border-box;
}

另见: box-sizing

能见度

1
2
3
.invisible-elements {
  visibility: hidden; /* 隐藏元素 */
}

另见: Visibility

Auto 关键字

1
2
3
4
div {
  /* 览器自己选择一个合适的外边距 */
  margin: auto;
}

另见: 边距(margin)

溢出(Overflow)

1
2
3
4
.small-block {
  /* 浏览器总是显示滚动条 */
  overflow: scroll;
}

另见: 溢出(overflow)

CSS 动画

速记

1
2
3
animation:  bounce   300ms      linear     100ms    infinite   alternate-reverse  both                   reverse  
            ┈┬┈┈     ┈┬┈┈┈      ┈┬┈┈┈┈     ┈┈┬┈┈    ┈┈┈┬┈┈┈┈   ┈┈┬┈┈┈┈┈┈┈┈┈┈┈┈┈┈  ┈┈┬┈┈┈                 ┈┈┬┈┈┈
            动画名    动画时间     缓动函数    延迟     运行的次数   动画是否反向播放      如何将样式应用于其目标    是否运行或者暂停

属性

属性 说明
animation: (速记)
animation-name: 动画名 #
animation-duration: 动画周期的时长 #
animation-timing-function: 缓动函数 #
animation-delay: 延迟 #
animation-iteration-count: 运行的次数 #
animation-direction: 动画是否反向播放 #
animation-fill-mode: 如何将样式应用于其目标 #
animation-play-state: 是否运行或者暂停 #

另见: 动画(Animation)

示例

1
2
3
4
5
6
7
8
9
10
11
12
/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;
/* @keyframes duration | name */
animation: 3s slidein;
animation: 4s linear 0s infinite alternate move_eye;
animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Javascript 事件

1
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')

CSS Flexbox

简单实例

1
2
3
.container {
  display: flex;
}
1
2
3
.container > div {
  flex: 1 1 auto;
}

容器

{2-3,5-8,10-11,13-16,18-23}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.container {
  display: flex;
  display: inline-flex;
  
  flex-direction: row;            /* ltr - 行(左向右) ▶ */
  flex-direction: row-reverse;    /* rtl - 行(右向左) ◀ */
  flex-direction: column;         /* top-bottom ▼ */
  flex-direction: column-reverse; /* bottom-top ▲ */
  
  flex-wrap: nowrap;       /* 摆放到一行 */
  flex-wrap: wrap;         /* 被打断到多个行中 */
  
  align-items: flex-start; /* 垂直对齐 - 顶部 */
  align-items: flex-end;   /* 垂直对齐 - 底部 */
  align-items: center;     /* 垂直对齐 - 中间 */
  align-items: stretch;    /* 所有人都一样的高度 (默认) */
  
  justify-content: flex-start;    /* [◀◀◀        ] */
  justify-content: center;        /* [    ■■■    ] */
  justify-content: flex-end;      /* [        ▶▶▶] */
  justify-content: space-between; /* [◀    ■    ▶] */
  justify-content: space-around;  /* [ ■   ■   ■ ] */
  justify-content: space-evenly;  /* [  ■  ■  ■  ] */
}

子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.container > div {

  /* 这个: */
  flex: 1 0 auto;
  /* 相当于这个： */
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;

  order: 1;

  align-self: flex-start;  /* left */
  margin-left: auto;       /* right */
}

justify-content

1
justify-content: flex-start | flex-end | center | space-between

flex-start：左对齐(默认值)

1
2
3
4
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆╭┈┈╮╭┈╮╭┈┈┈╮                     ┆
┆╰┈┈╯╰┈╯╰┈┈┈╯                     ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

flex-end：右对齐

1
2
3
4
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆                     ╭┈┈╮╭┈╮╭┈┈┈╮┆
┆                     ╰┈┈╯╰┈╯╰┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

center： 居中

1
2
3
4
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆          ╭┈┈╮╭┈╮╭┈┈┈╮           ┆
┆          ╰┈┈╯╰┈╯╰┈┈┈╯           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

space-between：两端对齐，项目之间的间隔都相等

1
2
3
4
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆╭┈┈╮           ╭┈╮          ╭┈┈┈╮┆
┆╰┈┈╯           ╰┈╯          ╰┈┈┈╯┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

1
2
3
4
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆   ╭┈┈╮        ╭┈╮       ╭┈┈┈╮   ┆
┆   ╰┈┈╯        ╰┈╯       ╰┈┈┈╯   ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

上面示例，假设主轴为从左到右

flex-wrap

1
flex-wrap: nowrap | wrap | wrap-reverse;

nowrap：不换行(默认)

1
2
╭1╮╭2╮╭3╮╭4╮╭5╮╭6╮╭7╮╭8╮╭9╮╭10╮
╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈╯╰┈┈╯

wrap：换行，第一行在 上方

1
2
3
4
╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
╭8┈╮ ╭9┈╮ ╭10╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯

wrap-reverse：换行，第一行在 下方

1
2
3
4
╭8┈╮ ╭9┈╮ ╭10╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯
╭1┈╮ ╭2┈╮ ╭3┈╮ ╭4┈╮ ╭5┈╮ ╭6┈╮ ╭7┈╮
╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯

项目都排在一条线（又称”轴线”）上

flex-direction

1
flex-direction: row | row-reverse | column | column-reverse;
1
2
3
4
5
6
7
8
╭┈┈╮  ▲         ╭┈┈╮  ┆
╰┈┈╯  ┆         ╰┈┈╯  ┆
╭┈┈╮  ┆         ╭┈┈╮  ┆
╰┈┈╯  ┆         ╰┈┈╯  ┆     ┈┈┈┈┈┈┈┈┈┈┈▶    ◀┈┈┈┈┈┈┈┈┈┈┈
╭┈┈╮  ┆         ╭┈┈╮  ┆    ╭┈┈╮ ╭┈┈╮ ╭┈┈╮  ╭┈┈╮ ╭┈┈╮ ╭┈┈╮
╰┈┈╯  ┆         ╰┈┈╯  ▼    ╰┈┈╯ ╰┈┈╯ ╰┈┈╯  ╰┈┈╯ ╰┈┈╯ ╰┈┈╯
┈┬┈┈┈┈┈┈        ┈┬┈┈┈┈┈┈    ┈┬┈┈┈┈┈┈┈┈┈┈┈   ┈┬┈┈┈┈┈┈┈┈┈┈┈ 
column-reverse  column       row             row-reverse

属性决定主轴的方向（即项目的排列方向）

align-items

1
align-items: flex-start | flex-end | center | baseline | stretch;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  ▶ flex-start(起点对齐)    ▶ flex-end(终点对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆  ┆                     ┆
┆ ┆  ┆ ┆  ┆ ╰┈┈╯ ┆  ┆ ┆  ┆      ╭┈┈╮           ┆
┆ ╰┈┈╯ ┆  ┆      ╰┈┈╯ ┆  ┆ ╭┈┈╮ ┆  ┆      ╭┈┈╮ ┆
┆      ╰┈┈╯           ┆  ┆ ┆  ┆ ┆  ┆ ╭┈┈╮ ┆  ┆ ┆
┆                     ┆  ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
  ▶ center(中点对齐)        ▶ stretch(占满整个容器的高度)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆      ╭┈┈╮           ┆  ┆ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ╭┈┈╮ ┆
┆ ╭┈┈╮ ┆  ┆      ╭┈┈╮ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆ ┆  ┆ ┆  ┆ ╭┈┈╮ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆ ┆  ┆ ┆  ┆ ╰┈┈╯ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆ ╰┈┈╯ ┆  ┆      ╰┈┈╯ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆  ┆ ┆
┆      ╰┈┈╯           ┆  ┆ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
  ▶ baseline(第一行文字的基线对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆  ╭┈┈┈┈┈┈╮               ╭┈┈┈┈┈┈╮             ┆
┆  ┆      ┆ ╭┈┈┈┈╮ ╭┈┈┈┈╮ ┆      ┆ ╭┈┈┈┈╮╭┈┈┈┈╮┆
┆  ┆ text ┆ ┆text┆ ┆text┆ ┆ text ┆ ┆text┆┆text┆┆
┆  ┆      ┆ ╰┈┈┈┈╯ ┆    ┆ ┆      ┆ ╰┈┈┈┈╯┆    ┆┆
┆  ╰┈┈┈┈┈┈╯        ╰┈┈┈┈╯ ╰┈┈┈┈┈┈╯       ╰┈┈┈┈╯┆
┆                                              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

align-content

1
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 ▶ flex-start(起点对齐)     ▶ flex-end(终点对齐)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆  ┆                      ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆  ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
┆ ╭┈┈┈╮╭╮              ┆  ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
┆ ╰┈┈┈╯╰╯              ┆  ┆ ╭┈┈┈╮╭╮              ┆
┆                      ┆  ┆ ╰┈┈┈╯╰╯              ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 ▶ center(中点对齐)         ▶ stretch(满整个交叉轴)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆                      ┆  ┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆
┆ ╭┈┈╮╭┈╮╭┈┈┈╮╭╮╭┈┈┈┈╮ ┆  ┆ ┆  ┆┆ ┆┆   ┆┆┆┆    ┆ ┆
┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆  ┆ ╰┈┈╯╰┈╯╰┈┈┈╯╰╯╰┈┈┈┈╯ ┆
┆ ╭┈┈┈╮╭╮              ┆  ┆ ╭┈┈┈╮╭╮╭┈╮           ┆
┆ ╰┈┈┈╯╰╯              ┆  ┆ ┆   ┆┆┆┆ ┆           ┆
┆                      ┆  ┆ ╰┈┈┈╯╰╯╰┈╯           ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
 ▶ space-between(两端对齐)  ▶ space-around(均匀分布项目)
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮  ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ 
┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆  ┆                      ┆ 
┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆  ┆ ╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮╭┈┈╮ ┆ 
┆                      ┆  ┆ ╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯╰┈┈╯ ┆ 
┆                      ┆  ┆                      ┆ 
┆                      ┆  ┆ ╭┈┈╮                 ┆ 
┆ ╭┈┈╮                 ┆  ┆ ╰┈┈╯                 ┆ 
┆ ╰┈┈╯                 ┆  ┆                      ┆ 
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯  ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

order

1
2
3
.item {
  order: <integer>;
}
1
2
3
4
5
6
7
8
9
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
┆ ╭1┈╮ ╭1┈┈╮ ╭1┈╮ ╭2┈╮ ╭3┈┈┈┈┈┈╮ ┆ ┆ ╭2┈┈┈┈╮ ┆
┆ ╰┈┈╯ ╰┈┈┈╯ ╰┈┈╯ ╰┈┈╯ ╰┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ┆ ╭2┈┈┈┈╮ ┆
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ ╰┈┈┈┈┈╯ ┆
┆ ╭-┈┈╮ ╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮   ┆ ┆ ╭99┈┈┈╮ ┆
┆ ┆-1 ┆ ┆ 1 ┆ ┆ 2      ┆ ┆ 5 ┆   ┆ ┆ ┆     ┆ ┆
┆ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯   ┆ ┆ ╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

属性 order 定义项目的排列顺序。数值越小，排列越靠前，默认为 0

flex-grow

1
2
3
.item {
  flex-grow: <number>; /* default 0 */
}
1
2
3
4
5
6
7
8
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈┈1┈┈╮╭┈┈2┈┈╮╭┈┈1┈┈╮ ┆
┆ ╰┈┈┈┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ ╭┈1┈╮╭┈┈┈┈2┈┈┈┈╮╭┈1┈╮ ┆
┆ ╰┈┈┈╯╰┈┈┈┈┈┈┈┈┈╯╰┈┈┈╯ ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

属性 flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

CSS Flexbox 技巧

垂直中心

1
2
3
4
5
6
7
8
.container {
  display: flex;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

垂直中心 (2)

1
2
3
4
5
6
7
.container {
  display: flex;
  /* 垂直的 */
  align-items: center; 
  /* 水平的 */
  justify-content: center;
}

重新排序

1
2
3
4
5
6
.container > .top {
 order: 1;
}
.container > .bottom {
 order: 2;
}

移动布局

1
2
3
4
5
6
7
8
9
10
.container {
  display: flex;
  flex-direction: column;
}
.container > .top {
  flex: 0 0 100px;
}
.container > .content {
  flex: 1 0 auto;
}

一个固定高度的顶部栏和一个动态高度的内容区域

Table-like 像表格

1
2
3
4
5
6
7
.container {
  display: flex;
}
/* 这里的“px”值只是建议的百分比 */
.container > .checkbox { flex: 1 0 20px; }
.container > .subject  { flex: 1 0 400px; }
.container > .date     { flex: 1 0 120px; }

这会创建具有不同宽度的列，但会根据情况相应地调整大小

Vertical 垂直的

1
2
3
.container {
  align-items: center;
}

垂直居中所有项目

左和右

1
2
.menu > .left  { align-self: flex-start; }
.menu > .right { align-self: flex-end; }

CSS Grid 网格布局

网格模板列

1
2
3
4
5
#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

fr 相对单位

1
2
3
4
5
.grid {
  display: grid;
  width: 100px;
  grid-template-columns: 1fr 60px 1fr;
}

Grid Gap 网格间隙

1
2
3
4
5
6
/* 行间距为 20px */
/* 列之间的距离是 10px */
#grid-container {
  display: grid;
  grid-gap: 20px 10px;
}

CSS 网格行

CSS 语法:

  • grid-row: grid-row-start / grid-row-end;

实例

1
2
3
.item {
  grid-row: 1 / span 2;
}

CSS 块级网格

1
2
3
#grid-container {
    display: block;
}

CSS 内联级别网格

1
2
3
#grid-container {
  display: inline-grid;
}

CSS 网格行间隙

1
grid-row-gap: length;

任何合法的长度值，例如 px 或 %。0 是默认值

CSS 网格区域

1
2
3
.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}

minmax() 函数

1
2
3
4
.grid {
  display: grid;
  grid-template-columns: 100px minmax(100px, 500px) 100px; 
}

定义了一个长宽范围的闭区间

grid-row-start & grid-row-end

CSS 语法:

  • grid-row-start: auto|row-line;
  • grid-row-end: auto|row-line|span n;

实例

1
2
grid-row-start: 2;
grid-row-end: span 2;

对齐项目

1
2
3
4
5
6
7
#container {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

CSS 网格模板区域

1
2
3
4
5
6
7
8
9
.item {
  grid-area: nav;
}
.grid-container {
  display: grid;
  grid-template-areas:
  'nav nav . .'
  'nav nav . .';
}

Justify Self

1
2
3
4
5
6
7
#grid-container {
  display: grid;
  justify-items: start;
}
.grid-items {
  justify-self: end;
}

网格项目位于行的右侧（末尾）

对齐项目

1
2
3
4
5
6
7
#container {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

CSS 动态内容

变量

定义 CSS 变量

1
2
3
4
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

变量用法

1
2
3
4
#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

另见: CSS Variable

计数器

1
2
/* Set "my-counter" to 0 */
counter-set: my-counter;
1
2
/* Increment "my-counter" by 1 */
counter-increment: my-counter;
1
2
/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;
1
2
/* Reset "my-counter" to 0 */
counter-reset: my-counter;

另见: Counter set

使用计数器

1
2
3
4
5
body { counter-reset: section; }
h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}
1
2
3
4
5
6
7
8
ol {
  counter-reset: section;   
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

CSS 函数

calc()

1
2
3
4
div {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
}

calc() CSS 函数允许您在指定 CSS 属性值时执行计算

clamp()

1
font-size: clamp(1rem, 10vw, 2rem);

设置随窗口大小改变的字体大小

attr()

1
2
3
p:before {
  content: attr(data-foo) " ";
}

获取选择到的元素的某一 HTML 属性值

counter()

返回一个代表计数器的当前值的字符串

1
2
3
4
5
<ol>
  <li></li>
  <li></li>
  <li></li>
</ol>
1
2
3
4
5
6
7
8
9
10
ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::after {
  content: "[" counter(listCounter) "] == ["
    counter(listCounter, upper-roman) "]";
}

显示

1
2
3
1. [1]==[I]
2. [2]==[II]
3. [3]==[III]

counters()

1
2
3
4
5
6
7
8
9
10
11
12
ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker {
   content: counters(count, '.', upper-alpha) ') ';
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}

嵌套计数器，返回表示指定计数器当前值的连接字符串

env()

1
<meta name="viewport" content="... viewport-fit=cover">
1
2
3
4
5
6
7
body {
  padding:
    env(safe-area-inset-top, 20px)
    env(safe-area-inset-right, 20px)
    env(safe-area-inset-bottom, 20px)
    env(safe-area-inset-left, 20px);
}

用户代理定义的环境变量值插入你的 CSS 中

fit-content()

1
2
3
4
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

将给定大小夹紧为可用大小

max()

从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值

1
width: max(10vw, 4em, 80px);

例子中，宽度最小会是 80px，除非视图宽度大于 800px 或者是一个 em 比 20px 宽

min()

1
width: min(1vw, 4em, 80px);

从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值

minmax()

1
2
3
4
5
6
7
8
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

repeat() 轨道列表的重复片段

1
2
3
4
5
repeat(auto-fill, 250px)
repeat(auto-fit, 250px)
repeat(4, 1fr)
repeat(4, [col-start] 250px [col-end])
repeat(4, [col-start] 60% [col-end])

定义了一个长宽范围的闭区间

url()

1
2
background: url("topbanner.png") #00D no-repeat fixed;
list-style: square url(http://www.example.com/redball.png)

var()

1
2
3
4
5
6
7
:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

代替元素中任何属性中的值的任何部分

CSS 技巧

强制不换行

1
2
3
p {
  white-space:nowrap;
}

强制换行

1
2
3
4
p {
  word-break:break-all; /* 英文 */
  white-space:pre-wrap; /* 中文 */
}

滚动条平滑

1
2
3
html {
  scroll-behavior: smooth;
}

点击我页面会平滑滚动到入门

修改浏览器自动填充 input 样式

1
2
3
4
input[type="text"]:autofill {
  box-shadow: 0 0 0 1000px #000 inset;
  -webkit-text-fill-color: white;
}

另见: :autofill

修改 input type=”color” 样式

1
2
3
4
5
6
7
8
9
10
11
12
input[type="color"] {
  -webkit-appearance: none;
  border: none;
  width: 32px;
  height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}

忽略用作间距的换行符 <br />

1
2
3
br + br {
  display: none;
}

使用 :empty 隐藏空 HTML 元素

1
2
3
:empty {
  display: none;
}

CSS 重置

1
2
3
4
5
6
7
8
9
html {
  box-sizing: border-box;
}

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

有助于在不同的浏览器之间强制样式一致性，并为样式元素提供干净的盒子

设置光标样式

1
2
3
body {
  caret-color: red;
}

设置整个页面灰色

1
2
3
html {
  -webkit-filter: grayscale(.95);
}

上面示例设置了当前卡片灰色

<textarea>自动增加其高度

1
2
3
textarea {
  form-sizing: normal
}

定义容器的长宽比

1
2
3
div {
  aspect-ratio: 1/1 
}

属性 aspect-ratio 可以非常容易的定义一个容器的长宽比

使用 unset 而不是重置所有属性

使用 all 速记来指定元素的所有属性。将值设置为 unset 会将元素的属性更改为其初始值：

1
2
3
button {
  all: unset;
}

注意：IE11 不支持 all 和 unset 速记

超出显示省略号

1
2
3
4
5
6
7
8
p {
  overflow: hidden;/*超出部分隐藏*/
  /* 超出部分显示省略号 */
  text-overflow:ellipsis;
  /* 规定段落中的文本不进行换行 */
  white-space: nowrap;
  width: 250px;/*需要配合宽度来使用*/
}

给正文添加行高

您不需要为每个 <p>、<h*> 等添加行高。相反，将其添加到正文：

1
2
3
body {
  line-height: 1.5;
}

这样文本元素可以很容易地从 body 继承

使用图像作为光标

1
2
3
4
5
div {
  cursor: url('path-to-image.png'), url('path-to-fallback-image.png'), auto;
  /* 表情符号作为光标 */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🚀</text></svg>"), auto;
}

文本溢出显示省略号

1
2
3
4
5
6
.overflow-ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

一行文本截断显示省略号 (…)

将文本截断到特定的行数

1
2
3
4
5
6
.overflow-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

多行文本截断到特定的行数，末尾显示省略号 (…)

粘性定位元素

1
2
3
4
.sticky {
  position: sticky;
  top: 0;
}

属性 sticky 能在滚动到顶部的位置固定住元素

使用带有空链接的属性选择器

1
2
3
a[href^="http"]:empty::before {
  content: attr(href);
}

如果 <a> 标签里面没有内容，将 href 的值作为内容展示

使用 :root 表示灵活类型

响应式布局中的字体大小应该能够根据每个视口进行调整，您可以使用 :root 根据视口高度和宽度计算字体大小

1
2
3
:root {
  font-size: calc(1vw + 1vh + .5vmin);
}

您可以根据 :root 计算的值使用根 em 单位：

1
2
3
body {
  font: 1rem/1.6 sans-serif;
}

吸附滚动

{5,12}
1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
  height: 250px;
  overflow-x: scroll;
  display: flex;
  scroll-snap-type: x mandatory;
  column-gap: 10px;
}
.child {
  flex: 0 0 66%;
  width: 250px;
  background-color: #663399;
  scroll-snap-align: center;
}

可用于 轮播图 效果，效果预览

类似 contenteditable 的样式

1
2
3
4
div {
  -webkit-user-modify: 
    read-write-plaintext-only;
}

通过样式来控制一个元素 div 是否可以编辑

等宽表格单元格

尝试使用 table-layout: fixed 以保持单元格宽度相等：

1
2
3
table {
  table-layout: fixed;
}

利用属性选择器来选择空链接

当 <a> 元素没有文本内容，但有 href 属性的时候，显示它的 href 属性：

1
2
3
a[href^="http"]:empty::before {
  content: attr(href);
}

给 “默认” 链接定义样式

给 “默认” 链接定义样式：

1
2
3
4
a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式

用 rem 调整全局大小；用 em 调整局部大小

在根元素设置基本字体大小后 (html { font-size: 100%; }), 使用 em 设置文本元素的字体大小:

1
2
3
4
5
6
h2 { 
  font-size: 2em;
}
p {
  font-size: 1em;
}

然后设置模块的字体大小为 rem:

1
2
3
4
5
6
article {
  font-size: 1.25rem;
}
aside .module {
  font-size: .9rem;
}

现在，每个模块变得独立，更容易、灵活的样式便于维护

隐藏没有静音、自动播放的影片

这是一个自定义用户样式表的不错的技巧。避免在加载页面时自动播放。如果没有静音，则不显示视频：

1
2
3
video[autoplay]:not([muted]) {
  display: none;
}

再次，我们利用了 :not() 的优点

为更好的移动体验，为表单元素设置字体大小

当触发 <select> 的下拉列表时，为了避免表单元素在移动浏览器（iOS Safari 和其它）上的缩放，加上font-size：

1
2
3
4
5
6
input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

使用指针事件来控制鼠标事件

指针事件允许您指定鼠标如何与其触摸的元素进行交互。要禁用按钮上的默认指针事件，例如：

1
2
3
4
button:disabled {
  opacity: .5;
  pointer-events: none;
}

就这么简单

子元素选中父元素

1
2
3
div:has(img) {
  background: black;
}

设置包含子元素 img 的 div 元素样式，还可以嵌套：

1
2
3
div:has(h2):has(ul) {
  background: black;
}

在用作间距的换行符上设置 display: none

用户使用额外的换行符

1
2
3
br + br {
  display: none;
}

给 body 添加行高

1
2
3
body {
  line-height: 1.5;
}

您不需要为每个 <p>、<h*> 等分别添加行高。相反，将其添加到正文

检查本地是否安装了字体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank-Mono"),
    /* 否则，请下载它！ */
    url("//...a.server/DankMono.woff");
}

code {
  font-family: "Dank Mono",
        system-ui-monospace;
}

您可以在远程获取字体之前检查是否在本地安装了字体，这也是一个很好的性能提示

获取 HTML 元素的属性

1
<a href="https://example.com">超链接</a>

attr HTML 元素的属性名。

1
2
3
a:after {
  content: " (" attr(href) ")";
}

为表单元素设置 :focus

1
2
3
4
5
6
a:focus, button:focus, input:focus,
select:focus, textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

有视力的键盘用户依靠焦点来确定键盘事件在页面中的位置。使表单元素的焦点比浏览器的默认实现更加突出和一致

垂直居中任何东西

1
2
3
4
5
6
7
8
9
10
11
12
html, body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

…还有 CSS 网格：

1
2
3
4
5
6
body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

图片对齐不变形

1
2
3
4
5
6
7
8
9
10
11
12
img {
  width: 200px;
  height: 200px;
  /** 确保图片按原始宽高比例进行缩放 */
  object-fit: cover;
  object-position: left top;
  transition: 1s;
}
img:hover {
  /** 指定图片显示的位置，结合鼠标移动+过渡动画 */
  object-position: right bottom;
}

多行截断，展示省略号

1
2
3
4
5
6
.clamp {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

html 文本超过 3 行将被截断，显示省略号…

1
2
3
<p class="clamp">
  展示多行文本，超过 3 行将被截断，显示省略号...
</p>

逗号分隔列表

1
2
3
ul > li:not(:last-child)::after {
  content: ",";
}

使列表项看起来像一个真实的逗号分隔列表，使用 :not() 伪类，最后一项不会添加逗号

另见

评论
avatar
竹山一叶
技术分享 个人心得
文章
437
标签
26
分类
19
Follow Me
公告
欢迎光临小站，这里是我日常工作和学习中收集和整理的总结，希望能对你有所帮助：）

本站的内容经过个人加工总结而来，也参考了网友们分享的资料，如有侵权，请第一时间联系我，我将及时进行修改或删除😊
目录
  1. 1. 入门
    1. 1.1. 介绍
      1. 1.1.1. 外部样式表 <link>
      2. 1.1.2. 内部样式表 <style>
      3. 1.1.3. 内联样式 style
    2. 1.2. 添加 class 类
    3. 1.3. !important
    4. 1.4. 选择器
    5. 1.5. 文本颜色
    6. 1.6. 背景
    7. 1.7. 字体
    8. 1.8. 定位
    9. 1.9. 动画
    10. 1.10. 注释
    11. 1.11. Flex 布局
    12. 1.12. Grid 布局
    13. 1.13. 变量和计数器
  2. 2. CSS 选择器
    1. 2.1. 示例
      1. 2.1.1. 组选择器
      2. 2.1.2. 链选择器
      3. 2.1.3. 属性选择器
      4. 2.1.4. 第一个子选择器
      5. 2.1.5. 无子选择器
    2. 2.2. 基础
    3. 2.3. 组合器
    4. 2.4. 属性选择器
    5. 2.5. 用户操作伪类
    6. 2.6. 伪类
    7. 2.7. 输入伪类
    8. 2.8. 结构伪类
  3. 3. CSS 字体
    1. 3.1. 属性
    2. 3.2. 速记
    3. 3.3. 示例
    4. 3.4. 大小写
    5. 3.5. @font-face
  4. 4. CSS 颜色
    1. 4.1. 命名颜色
    2. 4.2. 十六进制颜色
    3. 4.3. rgb() 颜色
    4. 4.4. HSL 颜色
    5. 4.5. 其它
    6. 4.6. 全局值
  5. 5. CSS 背景
    1. 5.1. 属性
    2. 5.2. 速记
    3. 5.3. 示例
  6. 6. CSS 盒子模型
    1. 6.1. 最大值/最小值
    2. 6.2. 边距/补白
    3. 6.3. Box-sizing
    4. 6.4. 能见度
    5. 6.5. Auto 关键字
    6. 6.6. 溢出(Overflow)
  7. 7. CSS 动画
    1. 7.1. 速记
    2. 7.2. 属性
    3. 7.3. 示例
    4. 7.4. Javascript 事件
  8. 8. CSS Flexbox
    1. 8.1. 简单实例
    2. 8.2. 容器
    3. 8.3. 子元素
    4. 8.4. justify-content
    5. 8.5. flex-wrap
    6. 8.6. flex-direction
    7. 8.7. align-items
    8. 8.8. align-content
    9. 8.9. order
    10. 8.10. flex-grow
  9. 9. CSS Flexbox 技巧
    1. 9.1. 垂直中心
    2. 9.2. 垂直中心 (2)
    3. 9.3. 重新排序
    4. 9.4. 移动布局
    5. 9.5. Table-like 像表格
    6. 9.6. Vertical 垂直的
    7. 9.7. 左和右
  10. 10. CSS Grid 网格布局
    1. 10.1. 网格模板列
    2. 10.2. fr 相对单位
    3. 10.3. Grid Gap 网格间隙
    4. 10.4. CSS 网格行
      1. 10.4.1. 实例
    5. 10.5. CSS 块级网格
    6. 10.6. CSS 内联级别网格
    7. 10.7. CSS 网格行间隙
    8. 10.8. CSS 网格区域
    9. 10.9. minmax() 函数
    10. 10.10. grid-row-start & grid-row-end
      1. 10.10.1. 实例
    11. 10.11. 对齐项目
    12. 10.12. CSS 网格模板区域
    13. 10.13. Justify Self
    14. 10.14. 对齐项目
  11. 11. CSS 动态内容
    1. 11.1. 变量
    2. 11.2. 计数器
    3. 11.3. 使用计数器
  12. 12. CSS 函数
    1. 12.1. calc()
    2. 12.2. clamp()
    3. 12.3. attr()
    4. 12.4. counter()
    5. 12.5. counters()
    6. 12.6. env()
    7. 12.7. fit-content()
    8. 12.8. max()
    9. 12.9. min()
    10. 12.10. minmax()
    11. 12.11. repeat() 轨道列表的重复片段
    12. 12.12. url()
    13. 12.13. var()
  13. 13. CSS 技巧
    1. 13.1. 强制不换行
    2. 13.2. 强制换行
    3. 13.3. 滚动条平滑
    4. 13.4. 修改浏览器自动填充 input 样式
    5. 13.5. 修改 input type=”color” 样式
    6. 13.6. 忽略用作间距的换行符 <br />
    7. 13.7. 使用 :empty 隐藏空 HTML 元素
    8. 13.8. CSS 重置
    9. 13.9. 设置光标样式
    10. 13.10. 设置整个页面灰色
    11. 13.11. <textarea>自动增加其高度
    12. 13.12. 定义容器的长宽比
    13. 13.13. 使用 unset 而不是重置所有属性
    14. 13.14. 超出显示省略号
    15. 13.15. 给正文添加行高
    16. 13.16. 使用图像作为光标
    17. 13.17. 文本溢出显示省略号
    18. 13.18. 将文本截断到特定的行数
    19. 13.19. 粘性定位元素
    20. 13.20. 使用带有空链接的属性选择器
    21. 13.21. 使用 :root 表示灵活类型
    22. 13.22. 吸附滚动
    23. 13.23. 类似 contenteditable 的样式
    24. 13.24. 等宽表格单元格
    25. 13.25. 利用属性选择器来选择空链接
    26. 13.26. 给 “默认” 链接定义样式
    27. 13.27. 用 rem 调整全局大小；用 em 调整局部大小
    28. 13.28. 隐藏没有静音、自动播放的影片
    29. 13.29. 为更好的移动体验，为表单元素设置字体大小
    30. 13.30. 使用指针事件来控制鼠标事件
    31. 13.31. 子元素选中父元素
    32. 13.32. 在用作间距的换行符上设置 display: none
    33. 13.33. 给 body 添加行高
    34. 13.34. 检查本地是否安装了字体
    35. 13.35. 获取 HTML 元素的属性
    36. 13.36. 为表单元素设置 :focus
    37. 13.37. 垂直居中任何东西
    38. 13.38. 图片对齐不变形
    39. 13.39. 多行截断，展示省略号
    40. 13.40. 逗号分隔列表
  14. 14. 另见
最新文章
设备唯一标识方法（Unique Identifier）：如何在 Windows 系统上获取设备的唯一标识
设备唯一标识方法（Unique Identifier）：如何在 Windows 系统上获取设备的唯一标识
Python中使用urlencode提示not a valid non-string sequence or mapping object
Python中使用urlencode提示not a valid non-string sequence or mapping object
查看动态链接库dll或exe文件的依赖项
查看动态链接库dll或exe文件的依赖项
应用程序无法正常启动(0xc0150002)的解决思路
应用程序无法正常启动(0xc0150002)的解决思路
10种HTML禁止鼠标右键方法，你知道几种？
10种HTML禁止鼠标右键方法，你知道几种？
分类
标签
HexoGithubButterflyValineMarkdownGitLinuxSSHNginxIntelliJ IDEA/PyCharmAndroid StudioAndroidVisual Studio CodeUVCCameraGradleCMakeChromeToolsC++其他JNAVSCodePythonSVNJavaBAT
归档
网站资讯
文章数目 :
437
已运行时间 :
本站总字数 :
431.6k
本站访客数 :
本站总访问量 :
最后更新时间 :
文章归档文章分类文章标签复制本文标题复制本文地址
新窗口打开转到链接复制链接
随便逛逛