CSS选择器、CSS级联、CSS继承

基本选择器

*{} 普通选择器
#id id选择器
.class 类选择器
div{} 标签选择器

组合选择器
#one,.two,div{}

嵌套选择器
div#one.two{}

后代选择器
空格 后代
大于号 > 子代
加号 + 下一个兄弟
~ 之后所有的兄弟

属性选择器

[attr] 有attr属性名的
[attr=val] 有attr属性并且值是val
[attr^=val] 有attr属性并且以val开头
[attr$=val] 有attr属性并且以val结尾
[attr*=val] 有attr属性并且包含有val字符串
[attr~=val] 有attr属性并且有一个值是val

伪类选择器

后代子代伪类选择器
:first-child 选作为别人第一个孩子的元素
:last-child 选作为别人最后一个孩子的元素
:nth-child(n) 选作为别人第几个孩子的元素
:nth-last-child(n) 选作为别人倒数第几个孩子的元素
:first-of-type 选每种类型中的第一个孩子的元素
:last-of-type 选每种类型中的最后一个孩子的元素
:nth-of-type(n) 选每种类型中的第几个孩子的元素
:nth-last-of-type(n) 选每种类型中的倒数第几个孩子的元素
:only-child 作为别人的独生子

a标签的伪类选择器

:link 未被访问的状态
:visited 已访问的状态
:hover 鼠标悬停的状态
:active 鼠标点击的状态
from的伪类选择器
:valid 通过验证的
:invalid 没有验证的
:checked 用户选中的
:default 默认选中的
:in-range 在范围内的
:out-of-range 在范围外的

伪元素选择器

::before 在元素前添加伪元素
在该伪元素内可以设定宽高width/height
::after 在元素后添加伪元素
::first-line 选中第一行文字当作伪元素
::first-letter 选中第一个字符当中伪元素
::selection 选中用户选中的文字当做伪元素基本选择器

CSS级联

如果给同一个元素同一个属性设定了不同的属性值判断哪一个属性值最终生效。

1.重要性修饰
    查看有没有使用!important修饰
    color:red !important;
2.特性值
    style="" 1000
    id选择器内的css声明 100
    class类选择器 、伪类选择器、属性选择器 10
    标签选择器、伪元素选择器 1
    空格 ~ + * > 0
3.代码位置
    越靠下越优先，对于同一元素的同一属性来说，后面的css声明覆盖前面的css声明

CSS继承

color:inherit/initial/unset;
inherit 继承
initial 不继承
unset 不设定