CSS 选择器
CSS 选择器操作方法、使用教程、案例演示
常用
.class .description
/* 选择所有class="intro"的元素 */
#id #firstname
/* 选择所有id="firstname"的元素 */
*
/* 选择所有元素 */
element p
/* 选择所有<p>元素 */
element,element div,p
/* 选择所有<div>元素和<p>元素 */
element element div p
/* 选择<div>元素内的所有<p>元素 */
element>element div>p
/* 选择所有父级是 <div> 元素的 <p> 元素 */
element+element div+p
/* 选择所有紧跟在 <div> 元素之后的第一个 <p> 元素 */
+ 选择某个元素后面的一个元素
这个选择器也叫 临近选择器 或 兄弟选择器
.content + .link{
/* content 代码块后面的 link 代码块 */
}
对应 html 演示
<div class="content"></div>
<div class="link">使用 .content + .link 选择器，会选中 .content 后面的 .link 元素</div>
:has 选择某个元素前面的一个元素
.content:has( + .link){
/* link 代码块前面的 content 代码块 */
}
对应 html 演示
<div class="content">使用 .content:has( + .link) 选择器，会选中 .link 前面的 .content 元素</div>
<div class="link"></div>
:has 选择器 2022 年才逐步支持，大致兼容性如下（最低兼容版本）：
- 电脑
- chrome 105
- Safari 15.4
- 手机
- Chrome for Android 114
- Android Browser 114
- Samsung Internet 20
- Safari on iOS 15.4
选择在某个元素之前插入内容
:before p:before
/* 在每个<p>元素之前插入内容 */
选择在某个元素之后插入内容
:after p:after
/* 在每个<p>元素之后插入内容 */
:nth-child(n) 该元素其父元素的第n个子元素 :nth-last-child(n) 倒数该元素其父元素的第n个子元素 :only-child 选择只有一个子元素的某种父级元素
p:nth-child(2){}
/* 父元素的第二个子元素，不一定是p也有可能是h1-h6，具html结构 */
p:nth-chi* 奇数 */
p:nth-child(even){}
/* 偶数 */
p:nth-child(3n+0){}
/* 第三个开始，后面三的倍数 */
p:nth-child(3n+2){}
/* 从第2个开始，每到3的倍数（每第3个：2、5、8、11...） */
td:nth-child(4n+11){color: red;}
/* 从第11列（包括第11列）开始每数4列第4列（间隔3个）都是红色字体 */
/* nth-child 在处理一些表格需求时可以做出很多很牛p的效果 */
p:nth-last-child(2){}
div p:only-child{}
```css
`:nth-of-type(n)`
/* 选择该元素其父级下第n个该元素相同的元素 */
`:nth-last-of-type(n)`
/* 倒数选择该元素其父级下第n个该元素相同的元素 */
p:nth-of-type(2){}
p:nth-last-of-type(2){}
:last-child 该元素其父级下的最后一个该元素相同的元素,最后一个不同无效
p:last-child{}
:link a:link 选择所有未访问链接 :visited a:visited 选择所有访问过的链接 :active a:active 选择活动链接 :hover a:hover 选择鼠标在链接上面时
妙用
[attribute^=value] attribute html 标签的属性，value 表示属有三种方式：^值以这个内容开始，$表示值以这个内容结尾，*表示值包含这个内容。 以下为举例大多数标签可用，不限a标签。
/*选择 href 属性的值以"https"开头的元素*/
a[href^="https"]{}
/*选择 href 属性的值以".pdf"结尾的元素*/
a[href$=".pdf"]{}
/*选择 href 属性的值包含"1px.run"的元素*/
a[href*="1px.run"]{}
/* 选择 <p id="a"></p> 的元素（锚点链接 http://www.example.com/index.html#a） */
p:target{}
/* 选取任意的英文（en) 段落 */
p:lang(en){}
/* 选择 lang 属性为 en 中的 p 元素 */
:lang(en) > q{}
/* 选择所有带有target属性元素 */
[attribute] [target]
/* 选择所有使用target="-blank"的元素 */
[attribute=value] [target=-blank]
/* 选择标题属性包含单词"flower"的所有元素 */
[attribute~=value] [title~=flower]
/* 选择 lang 属性以 en 为开头的所有元素 */
[attribute|=language] [lang|=en]
:not(selector) 选择每个并非所选标签的元素
:not(p){}
:empty p:empty
/* 选择每个没有任何子级的p元素（包括文本节点） */
:target #news:target
/* 选择当前活动的#news元素（包含该锚名称的点击的URL）可以实现类似tab切换功能 */
:first-letter p:first-letter
/* 选择每一个<p>元素的第一个字母 */
:first-line p:first-line
/* 选择每一个<p>元素的第一行 */
:first-child p:first-child
/* 指定只有当<p>元素是其父级的第一个子级的样式。 */
:last-child p:last-child
/* 指定只有当<p>元素是其父级的最后一个子级的样式。 */
/* 选择不是P标签的元素 */
body :not(p){}
/* 选择 class 不是 .red 的 P 标签 */
p:not(.red){}
/* 选择 <h2> 元素中不是有 `.foo` 类名的 <span> 元素 */
h2 :not(span.foo){}
/* 不是 <div> 或 `.fancy` 的元素*/
body :not(div, .fancy){}
表单输入框
:valid :valid
/* 用于匹配输入值为合法的元素 */
:invalid :invalid
/* 用于匹配输入值为非法的元素 */
:focus input:focus
/* 选择具有焦点的输入元素 */
:enabled input:enabled
/* 输入框、按钮等可操作元素，没有被禁用状态，定义样式 */
选择内容
选择第一个字母或者汉字
p::first-letter {
font-size: 2em;
font-weight: bold;
padding-right: 0.3em;
}
选择段落的第一行
需注意的是，这是第一行，不是段落第一句。
p::first-line {
font-weight: bold;
font-size: 1.4em;
}
content 相关
/* 添加 a 标签的链接 */
a::after {
content: " (" attr(href) ")";
}
/* 添加 图片 */
.topic-hot::before {
content: url('../../media/examples/fire.png');
}
/* 渐变 */
.topic-hot::before {
content: linear-gradient(#e66465, #9198e5);
}
/* 选择图片 */
.topic-hot::before {
content: image-set("image1x.png" 1x, "image2x.png" 2x);
}
自定义 title 悬浮文字样式
a[title]:hover::after {
content: attr(title);
padding: 4px 8px;
color: #333;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
border-radius: 5px;
box-shadow: 0px 0px 4px #222;
background-image: linear-gradient(#eeeeee, #cccccc);
}