CSS选择器常见的有哪几种?
一、简单选择器 Simple Selectors
选择器 |
含义 |
* |
通用元素选择器,匹配任何元素 |
E |
标签选择器,匹配所有使用E标签的元素 |
.info |
class选择器,匹配所有class属性中包含info的元素 |
#footer |
id选择器,匹配所有id属性等于footer的元素 |
二、属性选择器 Attribute Selectors
选择器 |
含义 |
[atrr] |
选择包含 attr 属性的所有元素,不论 attr 的值为何 |
[attr=val] |
[attr=val] 仅选择 attr 属性被赋值为 val 的所有元素 |
三、组合选择器 Combinators
选择器 |
含义 |
A, B |
选中匹配 A 或/和 B 的元素 |
A B |
选中匹配 B 且为匹配 A 的元素的后代元素(A B之间空格分开) |
A > B |
选中匹配 B 且为匹配 A 的元素的直接子元素 |
A + B |
选中匹配 B 且为匹配 A 的元素的下一相邻元素 |
A ~ B |
选中匹配 B 且为匹配 A 的元素的下 N 个相邻元素 |
四、伪类 Pseudo-classes
选择器 |
含义 |
a:link |
匹配所有未被点击的链接 |
a:visited |
匹配所有已被点击的链接 |
a:hover |
匹配鼠标悬停其上的a元素 |
a:active |
匹配鼠标已经其上按下、还没有释放的a元素 |
li:first-child |
匹配父元素的第一个子元素li |
li:last-child |
匹配父元素的最后一个子元素li |
li:nth-child(n) |
匹配父元素的第n个子元素li(odd奇数,even偶数) |
五、伪元素 Pseudo-elements
选择器 |
含义 |
E::before |
在E元素内创建一个子元素,插入生成的内容作为伪元素,放在最前面 |
E::after |
在E元素内创建一个子元素,插入生成的内容作为伪元素,放在最后面 |
E::selection |
应用于文档中被用户高亮的部分(比如使用鼠标选中的部分) |
E::first-letter |
匹配E元素的第一个字母第一行的第一个字母 |
E::first-line |
匹配E元素的第一行 |
六、多重选择器 Multiple Selectors
在HTML中,我们有时会对同一个标签赋予多个class名称,如:
<div class="one two"></div>
而在CSS里面则可能同时选择多个class,像是:
.one .two{} /*两个 class 中有空格*/
.one.two{} /*两个 class 中沒有空格*/
.one, .two{} /*两个 class 中出现逗号*/
这三者 one.two{ }
,.one .two{ }
,或者是.one, .two{ }
有何区别?
- 第一个的 one 和 two 中间包含空格,意思是指,我必须要是在 one 裡面的 two,才会被选择到。
- 第二个的 one 和 two 中间没有包含空格,表示某个区块必须同时具有 one 和 two 的 class 时,才能被 CSS 所选择到到。
- 第三个的 one 和 two 中间包含逗号,意思是指 class 中有 one 或 two,都会被编辑器所选择到。
简单来说,没空格表示必须同时包含才会被选取;有空格表示后面的 class 被镶嵌在前面的 class 中才会被选取;逗号则表示只要有其中一个 class 就会被选取到 。
文中参考了如下内容:
CSS选择器笔记——阮一峰的网络日志
CSS中的多重选择器——PJCHENder
网友评论