CSS选择器及权重的选择

选择器的类型

1.元素选择器

标签名 {}

2.id选择器 

#id名{}

 3.类选择器 

类名{}

为一个元素指定多个class 用空格分隔开

4.通配选择器

*{}

5.交集选择器

选择器1选择器2选择器n{}

6.并集选择器

选择器1，选择器2，选择器n{}

7.关系选择器

(1).父元素>子元素{}

(2).祖先元素 后代元素{}

(3).兄弟元素

前一个+下一个（紧挨着的后面的的元素）

前一个~下面的（后面的所有的兄弟元素）

8.属性选择器

[属性名] 选择指定属性的元素

[属性名=属性值] 选择含有指定属性和属性值的元素

[属性名^=属性值] 选择含有指定属性以指定值开头的元素

[属性名*=属性值] 选择含有指定属性包含指定值的元素

9.伪类选择器

一般以：开头

：first-child{} 第一个子元素 根据结构进行排序

：last-child{} 最后一个子元素

：nth-child(n) {} 第n个子元素

：nth-child(odd/2n+1) {} 奇数位的元素

：nth-child(even/2n) {} 偶数位的元素

：first-of-type 根据子元素类型进行排序

10.元素（超链接）的伪类

a:link正常的链接

a:visited 访问过的链接

a:hover 鼠标放上

a:active 鼠标点击      

伪类： 当某个元素处于某个状态为它添加样式  比如 选中第一个元素 鼠标放上

11.伪元素

：：before  ：：after 这些不是文档树之外元素

选择器的权重

通过不同的选择器，选中了同一个元素，同一种样式发生冲突，样式由选择器权重来决定

内联样式        1，0，0，0

id选择器         0，1，0，0

类选择器        0，0，1，0

元素选择器     0，0，0，1

通配选择器     0，0，0，0

继承的样式      没有优先级      

交集选择器  

比较优先级时，将所有选择器的优先级进行相加，优先级越高，则优先显示

选择器的累加不会超过其最大数量级，类选择器再高也不会超过id选择器

如果优先级计算后相同,优先使用靠下的样式

并集选择器

继承 发生在祖先元素和后代元素之间

!important 可以获取最高优先级，甚至超过内联样式，开发中要慎用