CSS 选择器 及 选择器的优先级

CSS 基础选择器

* 通配符选择器,代表页面上所有的标签
id 选择器,同一个页面不可以重复
class 选择器,同一个元素拥有多个class用逗号隔开
标签选择器
群组选择器


CSS 结构选择器

子类选择器:
    父级选择器 > 子级选择器
    只会往父级的下一级去查找
    不会深度查找一级级内部的子级
    
兄弟选择器:
    某元素后面紧跟着下一个兄弟(下一个兄弟元素)(.title+div)
    某元素后面的所有的兄弟(.title~div)


CSS 属性选择器

选择器[ 属性名称 ]
    从选择器中筛选具有这个属性名称的元素
选择器[ 属性名称 = "属性值" ]
    从选择器中筛选具有这个属性名称,并且属性值为指定值的元素
选择器[ 属性名称 ~= "属性值" ]
    从选择器中筛选出具有这个属性并且属性值是这个词列表
    词列表包括指定值的元素
选择器[ 属性名称 ^= "值" ]
    从选择器中筛选具有这个属性名称,并且属性值以制定元素开头的元素
选择器[ 属性名称 $= "值" ]
    从选择器中筛选具有这个属性名称,并且属性值以制定元素结尾的元素
选择器[ 属性名称 *= "值" ]
    从选择器中筛选具有这个属性名称,并且属性值包括指定值的元素
选择器[ 属性名称 |= "值" ]
    从选择器中筛选具有这个属性名称,并且属性值为指定值或者以"指定值-"开头的元素


CSS 伪类选择器

: first-child 
: last-child
: nth-child(n)
: nth-last-child(n)
: only-child

: first-of-type
: last-of-type
: nth-of-type(n)
: nth-last-of-type(n)
: only-of-type

: empty


CSS 选择器的优先级:使用不同的选择器给元素添加样式,浏览器优先采用的样式

1. 选择器优先级一致的情况下,后面的样式覆盖前面的样式
    !important > style > id > class > tag > *
2. 包含选择器的优先级是一种叠加关系
3. 群组选择器的优先级不会累加