CSS主要由两部分组成：
1.选择器：找到页面中指定的标签。
2.CSS样式代码：样式之间需要分号隔开。
对于选择器来说，丰富选择器的写法，可以精确找到页面中的某些标签。
后代选择器（派生选择器）
找到标签里面满足条件的所有的后代标签。.box p { }
找到class名为box的标签里面的所有p标签。
子元素选择器
找到标签里面满足条件的直接子元素，中间使用 > 隔开。相邻兄弟选择器
找到满足条件的标签后面相邻第一个标签，中间使用 + 隔开。ul .li2 + 1:
找到ul标签里面的class名为li2的标签后面相邻的第一个li标签。
后续兄弟选择器
找到页面中满足条件的标签后面所有的兄弟标签，中间用 ~ 隔开。组合选择器
将多种选择器组合在一起作用相同的样式，中间用逗号隔开。属性选择器
通过标签上的属性找到对应的标签。| 选择器 | 描述 |
|---|---|
| [属性名] | 用于选取带有指定属性的元素 |
| [属性名=属性值] | 用于选取带有指定属性和值的元素（精确匹配） |
| [属性名*=属性值] | 匹配属性值中包含指定值的某个元素（模糊匹配） |
| [属性名-=属性值] | 用于选取属性值中包含指定词汇的元素 |
| [属性名l=属性值] | 用于选取带有以指定值开头的属性值的元素，该值必须是某个单词 |
| [属性名^=属性值] | 匹配属性值以指定值开头的每个元素 |
| [属性名$=属性值] | 匹配属性值以指定值结尾的每个元素 |
（模糊匹配可以用于提取公共样式）
伪类选择器
给浏览器上的标签添加一些功能性的内容或效果。| 选择器 | 描述 |
|---|---|
| :link | 向未被访问过的超链接添加的样式 |
| :visited | 向被访问过的超链接添加的样式 |
| :hover | 鼠标移入元素上时，添加的样式 |
| :active | 向被激活的元素添加的样式 |
| :focus | 向拥有焦点的元素添加样式 |
注意：
（1）:link 和 :visited 是超链接所特有的。
（2）:hover 必须放在 :link 和 :visited 之后，:active 必须放在 :hover 之后。顺序：L-V-H-A
伪元素选择器
指可以在标签的开头或结尾添加一块渲染区域，该区域可以添加样式。::first-letter : 找到标签里面的第一个字符区域，添加样式。
::first-line :找到标签里面的第一个行区域，添加样式。
::before :在标签内容之前添加一块渲染区域，可以添加内容或者样式。
::after :在标签内容之后添加一块渲染区域，可以添加内容或者样式。
使用方法
.box::first-letter
注意：
（1）::before 和 ::after 需要配合content" "; 一起使用。
（2）::before 和 ::after 渲染的是一个行内元素，如需设置宽高，需要转为inline-block或block。
通配符选择器
找到页面中所有的标签。语法：
* {
css代码;
}
选择器的分类
基础选择器：id选择器、类选择器、标签选择器、属性选择器、伪类选择器、伪元素选择器、通配符选择器登。复合（组合）选择器：后代选择器、子元素选择器、兄弟选择器（相邻兄弟选择器、后续兄弟选择器）。
选择器的权重（优先级）
（1）相同选择器，内联权重最大，内部和外部采用就近原则。（2）基础选择器的权重大小：id选择器 > 类选择器（属性选择器）> 标签选择器 > 通配符选择器 > 继承
（3）组合选择器权重需要计算，将所有选择器叠加进行对比。
选择器权重计算方法
加法计算
内联样式的权重为10000id选择器的权重为100
类选择器（属性选择器）的权重为10
标签选择器的权重为1
继承的权重为0
将所有的选择器的权重值进行相加，对比大小，值大权重高。
注意：不满足满10进1规则。
4个0
（0，0，0，0）第一个0：代表是否有内联的样式，如果有则为1，无则为0
第二个0：代表id选择器的个数
第三个0：代表类选择器（属性选择器）的个数
第四个0：代表标签选择器的个数
从第一个0开始对比，值大的权重值高，如果值相同，对比第二个0，依次类推。如果最后一个0都相等，后面的样式层叠前面的样式。
CSS继承
继承更多出现在编程语言中，js中学习继承。父级元素的样式，子元素可以使用。CSS中很多属性，有些可以被继承，有些不可以继承，需要手动设置。
继承分为两种：
（1）自动继承：子元素可以自动从父元素上继承的样式。
（2）手动继承：子元素不能自动从父元素上继承的样式，需要手动设置继承。（inherit 从父元素上继承CSS属性的样式）
可以被自动继承的CSS属性
font系列的样式可以被自动继承
font-size
font-family
font-weight
font-style
文本样式可以被自动继承
color
text-align
line-height
text-decoration
letter-spacing
word-spacing
text-indent
text-transfrom
list-style li标签可以从ol或者ul上自动继承
鼠标的样式可以被自动继承
curosr pointer 抓手
不可以被自动继承的CSS属性
width
height
border
padding
margin
background等
