总结
1.选择器类型
ID 选择器
类选择器、属性选择器、伪类选择器
元素选择器(标签选择器)、关系选择器(层次选择器)、伪元素选择器
通配符选择器
2.样式优先级
注意:
(1) ... > 通配符 > 继承 > 浏览器默认属性。
(2) 可以实现自动继承的样式:font-size、text-indent、line-height。
3.选择器详解
(1)基本选择器:
ID 选择器(#id)、 类选择器(.class)、元素选择器(E)、通配符选择器(*)、群组选择器
(2)属性选择器:
E[attr]、E[attr=val]、E[attr|=val]、E[attr~=val]、E[attr*=val]、E[attr^=val]、E[attr$=val]
E[attr] E可以省略
E[attr|=val] 作用相当于 E[attr=val] 和 E[attr^=val]
(3)伪类选择器(:):
[1] 动态伪类选择器:
E:link、E:visited、E:acitved、E:hover、E:focus
输入框:hover / focus(点击以后)
链接:link(初始呈现,未操作状态) / hover(悬浮时)/ active(点击瞬间)/ visted(看过之后呈现的)
[2] 目标伪类选择器:E:target
[3] 语言伪类选择器:E:lang(language)
[4] UI元素状态伪类选择器:
E:checked、E:enabled、E:disabled
[5] 结构伪类选择器:
E:nth-child(n)、E:nth-last-child(n)、E:first-child、E:last-child、E:only-child
E:nth-of-type(n)、E:nth-last-of-type(n)、E:first-of-type、E:last-of-type、E:only-of-type
E:empty、E:root
E F:nth-child(n) 和 E F:nth-of-type(n) 的区别:
E F:nth-child(n) 是指元素 E 的第 n 个子元素,如果同时该子元素是元素F,则选中;否则选不中。
E F:nth-of-type(n) 是指元素 E 的第 n 个 F 子元素。
n 可以是(odd、even)、(2n+1、2n+2)、(n+5、-n+5)、(3n)等。
[6] 否定伪类选择器:E:not(F)
(4)关系选择器(层次选择器):
选择器 | 描述 |
E F | 后代选择器的作用是选择某元素的所有后代元素。 |
E>F | 子选择器只能选择某元素的子元素。 |
E+F | 相邻兄弟选择器可以选择紧临其后的一个同胞元素。 |
E~F | 通用兄弟选择器可以选择紧临其后的所有同胞元素。 |
(5)伪元素选择器(::):
::first-letter、::first-line、::before、::after、::selection
::before、::after 是指插入额外内容的位置;要为伪元素生成内容,还需要配合 content 属性。
::selection 是用来匹配突出显示的文本,且仅接受两个属性,一个是 background ,另一个是 color 。
参考:
END