1. 选择器

类选择器（.匹配class）
ID选择器（#匹配ID）
属性选择器
- [attr]表示带有以 attr 命名的属性的元素。
- [attr=value]表示带有以 attr 命名的属性，且属性值为 value 的元素。
- [attr~=value]表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value 。
- [attr|=value]表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（”-“为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
- [attr^=value]表示带有以 attr 命名的属性，且属性值是以 *value *开头的元素。
- [attr$=value]表示带有以 attr 命名的属性，且属性值是以 *value *结尾的元素。
- [attr*=value]表示带有以 attr 命名的属性，且属性值至少包含一个 *value *值的元素。
- [attr operator value i]在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
- [attr operator value s] 实验性在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。
伪类选择器
- 动态伪类选择器
  - :link
  - :visited
  - :hover
- UI元素状态伪类选择器
  - :checked
- 结构伪类选择器
  - :first-child
- 否定伪类选择器
- :not
伪元素选择器
伪元素选择器构造的元素是虚拟的，所以不能用JS去操作它。
- ::first-line，为某个元素的第一行文字使用样式。
- ::first-letter，为某个元素中的文字的首字母或第一个字使用样式。
- ::before，在某个元素之前插入一些内容。
- ::after，在某个元素之后插入一些内容。
- ::selection，对光标选中的元素添加样式。

2. 关系选择器

后代选择器（&nbsp）所有后代
相邻后代选择器（>）
兄弟选择器（~）
兄弟选择符，位置无须紧邻，只须同层级，A~B选择A元素之后所有同层级B元素。
相邻兄弟选择器（+）
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。

3. @规则

@media
@font-face
@page
@support

4. 动画

创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由@keyframes规则实现，具体情况参见使用 keyframes 定义动画序列小节部分。

正在加载中<dot>...</dot>

dot::before {
    display: block;
    content: '...\A..\A.';/* \A为LineFeed Unicode编码为000A，这里显示三行点，通过*/
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both; 
    /* 
        animation-name: dot;
        animation-duration: 3s;
        animation-iteration-count: infinite;
        animation-timing-function: step-start;
    */
}   
@keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
    /* 
        逐渐向下移动，一开始是.，之后因为overflow: hidden，之后移动下来变成..。
    */
}

5. 过渡

以Vue页面切换的动画举例。

App.vue中:

 <router-view v-slot="{ Component, route }">
     <transition :name="route.meta.transition" appear>
     <keep-alive>
         <component :is="Component" />
     </keep-alive>
     </transition>
 </router-view>
 ```
 ```css
 .fade-enter-from,
 .fade-leave-to {
 /*定义进入开始和离开结束的透明度为0*/
     opacity: 0;
 }
 .fade-leave-to {
     transform: translateX(10px); /* 离开一个页面 向右滑动*/
 }
 .fade-enter-to {
     transform: translateX(-10px); /* 进入一个新页面 向左滑动*/
 }
 .fade-enter-to,
 .fade-leave-from {
 /*定义进入结束和离开开始的透明度为1*/
     opacity: 1;
 }
 .fade-leave-active,
 .fade-enter-active {
     transition: all 0.2s ease-out;  /* 先快后慢*/
 }

 .aside-right-enter-active,
 .aside-right-leave-active {
     transition: all 0.2s ease;
 }

 .aside-right-enter-from,
 .aside-right-leave-to {
     transform: translate(100%, 0);  /*向右移动*/
 }

router/index.js中：

meta: { transition: 'aside-right' }