普通选择器：

id选择器：#

class选择器：.

> 子代选择器（常用）

空格 后代选择器（不常用）

标签选择器（避免使用）

, 分组选择器

+ 相邻兄弟关系

~ 兄弟关系，表所有兄弟关系

* 通用选择器（通配符）

[属性名="属性值"] 属性选择器（不常用）

伪类选择器(:)：

:first-child 选择所有元素的第一个，且必须是父元素中的第一个子元素

:first-of-type 选择所有同类元素的第一个

:last-child 选择所有元素的最后一个，且必须是父元素中的最后一个子元素

:last-of-type 选择所有同类元素的最后一个

:nth-child(n) 选择匹配元素中的的第n个

:nth-of-type(n) 选择匹配元素的第n个

:not(其他选择器(n)) 满足条件后反选所有元素，除被条件定义的元素

:visited 访问过的超链接（历史记录里有的）

:link 未访问过的超链接

:active 鼠标按下 未松开时的样式

:hover 鼠标移入时的样式

注：所有标签都可以使用，不只是超链接和按钮

伪元素选择器（::）：

::first-letter 选择元素中的第一个文字

::first-line 选择元素中的第一行文字

::selection 选择部分元素的文字区域的样式（不常用）

::before 最前面

::after 最后面

在元素前/后添加文本或者元素，一般用于外边距重叠或者浮动的高度塌陷

content:在页面中插入文字或者符号，默认是行内元素

选择器优先级：

important(无穷大)>行内(1000)>id选择器(100)>class选择器(10)>标签选择器(1)>通配(*)选择器(0)

同一行的选择器权重值相加，权重值较高的样式会覆盖权重值较低的样式

同一行的选择器权重值相加，相同权重值的后来者居上

单位：

px ：固定页面元素大小

百分比：动态，部分基于父元素

em：相对于⽗元素字体的⼤⼩，⼀般也很少⽤ 1em=10px

rem：相对于根元素字体的⼤⼩（即html标签），经常⽤于移动端（rem适配）

html(根元素)大小默认100%，默认字体大小16px

颜色：

颜色英文名 rad/green/blue

r：红

g：绿

b：蓝

#000000=#000 #00|00|00|00=#红|绿|蓝|透明度

rgb(0-255,0,0,) rgb(红r，绿g，蓝b) 最高值是255 rgb(255,0,0)=红色 rgb(0,255,0)=绿色 rgb(0,0,255)=蓝色

rgba( , , ,0-1) rgb(红r，绿g，蓝b，透明度) 透明度值是0-1

hsl(色相,饱和度,亮度)

hsla(色相,饱和度,亮度,透明度)

样式：

行内样式：在标签内使用style修饰

内联样式：在head中，使用style修饰

外链样式：在当前文件夹中创建一个css文件，用link外链这个文件

行内样式：

     <div class="app" style="width: 100%; height: 1000px;background-color: blue;">

内联式:

    <style>
    * {
        width: 100%;
        height: 1000px;
        background-color: blue;
    }
    </style>

外链式：

<link rel="stylesheet" href="./index.css">