CSS学习笔记[2]——CSS选择器

2021-09-24

选择器类型

基础选择器
组合选择器
属性选择器
伪类选择器
伪元素选择器

基础选择器

* ；通用选择器，匹配页面任何元素
#id；id选择器
.class；类选择器
element；标签选择器

组合选择器

E,F；多元素选择器，用“,”分割，同时匹配元素E或元素F
E F；后代选择器，用空格分隔，匹配E元素所有的后代（不止子元素）元素F
E>F; 子元素选择器，用>分隔，匹配E元素的所有直接子元素
E+F；直接相邻选择器，匹配E元素之后的相邻的同级元素F
E~F；普通相邻选择器，匹配E元素之后的同级元素F
.class1.class2；id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素
element#id；id和class选择器和选择器连写的时候中间没有分隔符，.和#本身充当分隔符的元素

属性选择器

E[attr]；匹配所有具有属性attr的元素
E[attr = value]；匹配属性attr值为value的元素
E[attr ~= value]；匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素
E[attr ^= value]；匹配属性attr的值以value开头的元素
E[attr $= value]；匹配属性attr的值以value结尾的元素
E[attr *= value]；匹配熟悉attr的值包含value的元素

伪类选择器

:hover
:active
:visited
:link
:checked
:focus
:disabled
:first-child
:last-child
:first-of-type
:last-of-type
:nth-of-type(n)

伪元素选择器

E::first-line
E::first-letter
E::before

p::before { content: '**'; color: red; }

E::after

选择器优先级 【CSS学习笔记[2]——CSS选择器】从高到低：

在属性后面使用！important会覆盖页面内任何位置定义的元素样式
作为style熟悉写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配符选择器
浏览器自定义
继承的样式

复杂场景选择器优先级计算权重

行内样式 ==> a
id选择器 ==> b
类、属性、伪类选择器 ==> c
标签选择器、伪元素 ==> d

推荐阅读

上一篇：52岁伊能静自称美少女！越活越年轻不是取决于年龄，而是拥有这些特质

下一篇：“释怀”你是怎么理解的（）