CSS 选择器伪类伪元素动画样式表优先级：内联样式 > 内部样式表 > 外部样式表ID选择器 > 类选择器/伪类选

样式表

<!-- 内联样式 -->
<p style="color: read; font-size: 12px">这里的文字是红色</p>
<!-- 内部样式表 -->
<head>
  <style type="text/css">
    span {
      color: red;
    }
  </style>
</head>
<!-- 外部样式表 -->
<link href="center.css" rel="stylesheet" type="text/css" />

优先级：内联样式 > 内部样式表 > 外部样式表

ID选择器 > 类选择器/伪类选择器/属性选择器 > 标签选择器/伪元素

!important 用于强制提升某个指定属性的优先级

CSS 选择器

元素选择器/标签选择器

html h1 h2 p

类选择器

class

. 类名

ID选择器

# ID名称

组合器

后代选择器。空格相连，A B。B是A的后代子结点。
子选择器。A > B 。B是A的直接子结点
相邻兄弟选择器。A + B 。B是A的下一个兄弟结点
通用兄弟选择器。 A ~ B 。B是A之后的兄弟结点的任意一个

属性选择器

伪类

当已有元素处于某个状态时，为其添加对应的样式。（:hover :checked :visited）

语法：选择器 : 伪类 { 属性：值 }

链接的不同状态

代码

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

还有一种 Tree-structural pseudo-classes，比如 :

:first-child (Matches an element that is the first of its siblings)

:nth-child (Uses An+B notation to select elements from a list of sibling elements)

:nth-of-type (Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.)

伪元素

伪元素是一个附加至选择器末的关键词，允许对被选择元素的特定部分修改样式

语法：

selector:pseudo-element {property:value;}

"first-line" 伪元素用于向文本的首行设置特殊样式。
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。

动画

transition过渡和animation动画的区别

共同点：都是随着时间改变元素的属性值，

其主要区别在于：

transition需要触发一个事件才会随着时间改变其CSS属性；animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

过渡只有一组（两个：开始-结束）关键帧，动画可以设置多个。

CSS 选择器 伪类 伪元素 动画

样式表