CSS选择器

CSS选择器优先级：

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

通过对某一样式声明 ! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级. 如：box{color:red !important;} 最先执行color:red样式

选择器分类

传统选择器

（1）id选择器 (#div1 #app)

（2）class选择器 (.name .container)

（3）标签选择器 (div a )

（4）通用选择器 （通配符 * ）

（5）伪类选择器 （a:hover a:link a:active a:visited）

（6）后代选择器 （选择器1 和 选择器2 用空格隔开，选择器1中包含的所有选择器2 可以隔好多代 子子孙孙 ）

CSS3 新增选择器

（1）元素关系选择器

子选择器	只会去匹配紧跟着的儿子元素，孙子元素是不会被选中的，与后代选择器区分开	a > b	选择紧跟着a的b元素
相邻兄弟选择器	介于子选择器与通用兄弟选择器之间，当第二个元素紧跟着第一个元素之后， 并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中	a + b	选中紧跟在a后面的一个b
通用兄弟选择器	选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器	a ~ b	选择a元素之后所有同层级的b元素

相邻兄弟选择器 用来设置中间元素的间隔（margin）很nice!

（2）序号选择器

:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	第n个子元素
:nth-of-type(n)	第n个某类型的子元素
:nth-last-child(n)	倒数第n个子元素

（3）属性选择器

p[ class = “content” ]	只要p元素的 class 属性值里含有 “content” 就能被选择
p[ class *= “content” ]	只要p元素的 class 属性值里含有 "content"就能被选择
p[ class ~= “content” ]	p元素中的 class 属性的属性值 "content"单独存在 或 存在的属性值与其他属性值之间用空格隔开就能被选择
p[ class |= “content” ]	p元素中 class 属性的属性值单独存在或属性值之间用 “-” 隔开且属性值 val 在 “-” 前
p[ class ^= “content” ]	p元素的 class 属性值里含有 "content"且 "content"在最前面才能被选择
p[ class $= “content” ]	p元素的 class 属性值里含有 "content"且 在最后面

例如：

/*选择div 下的p标签的class 属性值为bLue的元素*/
div p[class="blue"]{
    background:blue；
}

<div>
<pclass="blue">p标签</p>
<pclass="blue red">p标签</p>
<pclass="blue">p标签</p>
</div>

属性选择器权重要高于标签选择器

（4）伪元素选择器

:：after
:：before 每一个元素只能有两个伪元素，一个before一个after，多写会 自动覆盖
:：firstLetter 选中元素节点内部的文本节点的第一个
:：firstLine 选中元素节点的文本节点的第一行
:：selection 在页面结构中，选中节点时的样式管理

（5）群组选择器

（当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码 ）

/*定义所有级别的标题和段落行高为22px*/
h1，h2，h3，h4，h5，h6，p{
    line-height：22px；
}

（分组选择器选取所有具有相同样式定义的 HTML 元素。）

CSS3 新增伪类：

:empty	选择空标签
:focus	选择当前获得焦点表单元素
:enabled	选择当前有效的表单元素
:disabled	选择当前无效的表单元素
:checked	选择当前已勾选的单按钮或是复选框
:root	选择根元素，html标签