CSS 备忘清单

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

支持一个元素上的多个类

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

覆盖所有以前的样式规则

h1 { } 
#job-title { }
div.hero { }
div > p { }

查看: CSS 选择器

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

查看: Colors

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

查看: Backgrounds

.page-title {
  font-weight: bold;
  font-size: 30px;
  font-family: "Courier New";
}

查看: Fonts

.box {
  position: relative;
  top: 20px;
  left: 20px;
}

另见: Position

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

查看: Animation

/* 这是一行注释 */
/* 这是
   多行注释 */

div {
  display: flex;
  justify-content: center;
}
div {
  display: flex;
  justify-content: flex-start;
}

查看: Flexbox | Flex Tricks

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}
#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

查看: Grid Layout

counter-set: subsection;
counter-increment: subsection;
counter-reset: subsection 0;
:root {
  --bg-color: brown;
}
element {
  background-color: var(--bg-color);
}

查看: 动态内容

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

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

选择器	说明
div.classname	具有特定类名的 Div
div#idname	具有特定 ID 的 Div
div p	div中的段落
div > p	所有 p 个标签 div 深处的一层
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	访问链接 #

选择器	说明
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)	不是跨度的元素 #

选择器	说明
input:checked	检查 input #
input:disabled	禁用 input #
input:enabled	启用的 input #
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: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	其父母的唯一孩子 #

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

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

color: red;
color: orange;
color: tan;
color: rebeccapurple;

color: #090;
color: #009900;
color: #090a;
color: #009900aa;

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%);

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%);

color: inherit;
color: initial;
color: unset;
color: transparent;
color: currentcolor; /* 关键字 */

/* 全局值 */
color: inherit;
color: initial;
color: unset;

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

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

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

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

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

另见: box-sizing

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

另见: Visibility

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

另见: 边距(margin)

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

另见: 溢出(overflow)

.container {
  display: flex;
}
.container > div {
  width: 100px;
  height: 100px;
  margin: auto;
}

.container {
  display: flex;
  /* 垂直的 */
  align-items: center; 
  /* 水平的 */
  justify-content: center;
}

.container > .top {
 order: 1;
}
.container > .bottom {
 order: 2;
}

.container {
  display: flex;
  flex-direction: column;
}
.container > .top {
  flex: 0 0 100px;
}
.container > .content {
  flex: 1 0 auto;
}

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

.container {
  align-items: center;
}

垂直居中所有项目

#grid-container {
  display: grid;
  width: 100px;
  grid-template-columns: 20px 20% 60%;
}

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

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

#grid-container {
    display: block;
}

#grid-container {
  display: inline-grid;
}

grid-row-gap: length;

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

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

CSS 语法:

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

#container {
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item {
  grid-area: nav;
}
.grid-container {
  display: grid;
  grid-template-areas:
  'nav nav . .'
  'nav nav . .';
}

#grid-container {
  display: grid;
  justify-items: start;
}
.grid-items {
  justify-self: end;
}

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

#container {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-gap: 10px;
}

定义 CSS 变量

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

变量用法

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

另见: CSS Variable

/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Increment "my-counter" by 1 */
counter-increment: my-counter;

/* Decrement "my-counter" by 1 */
counter-increment: my-counter -1;

/* Reset "my-counter" to 0 */
counter-reset: my-counter;

另见: Counter set

body { counter-reset: section; }
h3::before {
  counter-increment: section; 
  content: "Section." counter(section);
}

ol {
  counter-reset: section;   
  list-style-type: none;
}
li::before {
  counter-increment: section;
  content: counters(section, ".") " "; 
}

html {
  scroll-behavior: smooth;
}

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

br + br {
  display: none;
}

:empty {
  display: none;
}

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

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

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;
}

.overflow-ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.overflow-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

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

div {
  width: calc(100% - 30px);
  height: calc(100% - 30px);
}

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

.sticky {
  position: sticky;
  top: 0;
}

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

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

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

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

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

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

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