二、CSS选择器
A、基本的四类选择器
-
元素选择器：选中对应元素/标签中的内容
<body> <p></p> <div></div> </body>/* 标签名 {} */ p {} div {} body {} -
id选择器：选中对应id属性值的元素
<div id="main"></div>/* #id属性值 {} */ #main {} -
类选择器：选中对应class属性值的元素
<div class="box"></div>/* .class属性值 {} */ .box {} -
通配符选择器：选中页面中所有元素
<p></p> <div></div>* {} /* 上面有p和div两个元素，都被选中了 */
B、复合选择器
-
交集选择器：同时选中满足多个条件的元素（选择器连在一起）
<p id="first"></p> <p class="box"></p>p.box {} /* 只选中了第二个p */ -
并集选择器：同时选中对应选择器的元素（以 ‘,’ 进行分割）
<p></p> <div></div>p, div {} /* 又选中p又选中div */ -
后代选择器：包含该元素的后代级的选择器（以空格进行分割）
在搞明白后代选择器之前需要先了解元素之间的关系，包括以下三种：
（1）父子关系：父元素包含子元素
<div><p></p></div> <!-- div是父级元素，p 子级元素，p也是div的后代 -->（2）后代关系：祖先元素直接/间接包含后代元素
<div><p><span></span></p></div> <!-- span、p都是div的后代元素 -->（3）兄弟关系：同级元素、在同一个父级元素下
<p></p><h1></h1> <!-- p与h1为兄弟关系元素 -->通过后代选择器实际用法，了解如何使用：
<p><span><div class="box"><p></p><h1></h1></div></span></p>p span .box p {} /* p父级下的span下的.box下的p */ -
子元素选择器：只有第一个子级/亲儿子才会被选中（以 ‘>’ 分割）
<ul><li><a></a></li></ul>ul>li {} /* 只选中了ul下的li */
C、属性选择器
| 语法 | 说明 | 代码 |
|---|---|---|
| E[a] | 选中包含指定属性a的元素 | a[title] {} |
| E[a=v] | 选中包含指定属性a和指定v属性值的元素 | a[href="#"] {} |
| E[a*=v] | 选中包含指定属性a和含有指定v属性值的元素 | a[href*="com"] {} |
| E[a^=v] | 选中包含指定属性a和指定v属性值开头的元素 | a[href^="www"] {} |
| E[a$=v] | 选中包含指定属性a和指定v属性值结尾的元素 | a[href$="cn"] {} |
D、伪类选择器
伪类：不存在的类，表示元素的一种状态，本质是为选中的元素添加效果。
-
动态伪类
选择器 说明 备注 :link未访问过的a标签 只适用于a标签 :visited已访问过的a标签 只适用于a标签 :hover鼠标进入该元素的状态 所有标签都可使用 :active鼠标点击后该元素的状态 所有标签都可使用 更详细的操作：
<a href="#"></a> <button></button>button:hover { color: red; } /* 鼠标进入该元素变红色 */ a:link { color: blue; } /* 未点击下的状态该标签呈现蓝色 */ a:visited { color: green; } /* 点击后该元素呈现绿色*/ button:active { color: orange; } /* 鼠标点击后该元素呈现橙色 */ -
否定伪类：将符号条件元素去除
<div></div><p></p>:not(p) { color: red; } /* 选中了div */ -
结构/位置伪类
| 选择器 | 说明 |
|---|---|
:first-child | 第一个子元素 |
:last-child | 最后一个子元素 |
:nth-child(n) | 第n个子元素，范围：[0,∞[ |
:first-of-type | 第一个相同元素 |
:last-of-type | 最后一个相同元素 |
:nth-of-type(n) | 第n个相同元素 |
-
目标伪类：当前跳转到的目标（一般是a标签与id配合）
<a href="#p1">跳转到p1</a> <a href="#p2">跳转到p2</a> <p id="p1">这里是p1</p> <p id="p2">这里是p2</p>p:target { color: red; } /* 点击到的p将变成红色 */ -
表单/UI元素状态：
| 选择器 | 说明 |
|---|---|
input:enabled/disabled | 开启/关闭 |
input/option:checked | input或option选中 |
: focus | 获取焦点 |
:required | 必填元素 |
E、伪元素选择器
伪元素：不存在的元素，表示元素的特殊状态，本质是插入元素（默认行内inline）。
| 选择器 | 说明 |
|---|---|
::first-letter | 首个单词/字 |
::first-line | 首行 |
::selection | 选中的文本 |
::before | 元素开始前创建新的伪元素 |
::after | 元素结束后创建新的伪元素 |
注意：创建新的伪元素必须添加content属性才能成功创建
<p> p标签 </p>
p::before { content: "before伪元素添加"; }
p::after { content: "after伪元素添加"; }
扫一扫
31万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
