CSS选择符总结

CSS选择符类型

1、类型选择器：h1，p等
2、类选择器：.classname
3、ID选择器：#idname
4、通配符选择器：*，表示选择所有元素
5、属性选择器：([foo=’bar’])
特殊的还有：

[src]：选择所有定义了 src 属性的元素
[abc^=”def”]：选择 abc 属性值以 “def” 开头的所有元素
[abc$=”def”]：选择 abc 属性值以 “def” 结尾的所有元素
[abc*=”def”]：选择 abc 属性值中包含子串 “def” 的所有元素
img[src|=”figure”]：选择 src 属性的第一个单词是 “figure” 的元素，例如 “figure-1”, “figure-2”
[title~=flower]：选择 titile 属性包含单词 “flower” 的元素

6、伪类

:active：向被激活的元素添加样式
:focus：向拥有键盘输入焦点的元素添加样式
:hover：当鼠标选悬浮在元素上方时，向元素添加样式
:link：向未被访问的链接添加样式
:visited：向已被访问的链接添加样式
:first-child：向元素的第一个子元素添加样式
:lang：向带有指定lang属性的元素添加样式

7、伪元素：first-letter,before等
8、组合选择符

ul li：空格表示后代选择器，选择所有出现在ul上下文里的li；
ul>li：>表示子元素选择器，比后代选择器缩小了范围，只选择（下一级）子元素；
h1+p：+表示相邻兄弟选择器，选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素；
h1~p：~表示通用兄弟选择器，同上，但 p 不一定是紧跟 h1。

对于初学者来说，CSS选择符只要概念清晰即可，没必要单独记，用到就关注一下，多用就熟练了