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标签 |