《一》CSS3 选择器

原创已于 2025-01-24 17:06:36 修改 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3

于 2019-03-13 11:27:04 首次发布

CSS3 专栏收录该内容

15 篇文章

订阅专栏

2010 年，CSS3 规范推出。

属性选择器：

A[B]：选择有属性 B 的 A 元素。

img[alt] // 选择有 alt 属性的 img 标签

A[B=C]：精准匹配，选择属性 B 等于 C 的 A 元素。

img[alt="故宫"] // 选择 alt 属性是 "故宫" 的 img 标签

A[B^=”C”]：开头匹配，选择属性 B 以 C 开头的 A 元素。

img[alt^="故宫"] // 选择 alt 属性以 "故宫" 开头的 img 标签

A[B$=”C”]：结尾匹配，选择属性 B 以 C 结尾的 A 元素。

img[alt$="故宫"] // 选择 alt 属性以 "故宫" 结尾的 img 标签

A[B*=”C”]：任意位置匹配，选择属性 B 中包含 C 的 A 元素。
```
img[alt*="故宫"] // 选择 alt 属性中包含有 "故宫" 的 img 标签
```

A[B~=”C”]：选择属性 B 中有以空格隔开的独立部分的 C 的 A 元素。

img[alt~="故宫"] // 选择 alt 属性中有空格隔开的 "故宫" 的 img 标签

<img src="images/gugong.png" alt="北京著名景点 故宫"> // 会被选中
<img src="images/gugong.png" alt="北京著名景点故宫"> // 不会被选中

A[B|=”C”]：选择属性 B 中有 C 加横杠 C- 开头的 A 元素。

img[alt|="故宫"] // 选择 alt 属性以 "故宫-" 开头的 img 标签

<img src="images/gugong.png" alt="故宫-北京著名景点"> // 会被选中
<img src="images/gugong.png" alt="故宫北京著名景点"> // 不会被选中

元素关系选择器:

A~B：通用兄弟元素选择器。匹配所有位于 A 元素后面的同层级的 B 元素。
A+B：相邻兄弟选择器。匹配紧跟在 A 元素后面的同层级的 B 元素。
A>B：子元素选择器。匹配作为 A 元素直接子元素的 B 元素。

A B：后代选择器。使用空格表示后代。匹配作为 A 元素所有后代子元素的 B 元素。

.box p {
	color: red;
}

// 选择类型为 box 的标签的后代中的 p 标签
<div class="box">
	<p>我会变成红色</p>
	<p>我会变成红色</p>
</div>
<p>我不会改变颜色</p>
<p>我不会改变颜色</p>

后代不仅仅是指儿子，不论层级多深，只要在标签内部就是后代。

.box p {
	color: red;
}

// 选择类型为 box 的标签的后代中的 p 标签
<div class="box">
	<ul><li><p>我会变成红色</p></li></ul>
</div>

后代选择器可以有很多空格，隔开好几代。

.box ul li .spec em {
	color: red;
}

// 选择类型为 box 的标签的后代中的 em 标签
<div class="box">
	<ul><li><p class="spec"><em我会变成红色</em></p></li></ul>
</div>

结构伪类选择器：

:root：匹配根元素，即 <html> 标签。
A:nth-child(n)：匹配 A 的父元素中的第 n 个元素，且这个元素需要为 A。n 从 1 开始计算。
A:nth-last-child(n)：匹配 A 的父元素中的倒数第 n 个元素，且这个元素需要为 A。n 从 1 开始。
A:first-child：匹配 A 的父元素中的第一个元素，且这个元素需要为 A。
A:last-child：匹配 A 的父元素中的最后一个元素，且这个元素需要为 A。
A:only-child：匹配 A 的父元素中只有一个子元素，且这个元素需要为 A。
```
<style>
	h3:nth-child(1) {
      color: red;
    }
    h3:nth-child(2) {
      color: green;
    }
</style>

<div>
  <h3>我是第一个子元素</h3> // 此段文本变为红色
  <p>我是第二个子元素</p> // 此段文本不变颜色
  <span>我是第三个子元素</span>
</div>
```
nth-child(n) 与 nth-of-type(n) 中的 n 可以是数字（从 1 开始）、关键词（odd 奇数、even 偶数）或算术表达式（an+b：表示从 b 开始每 a 个选一个；-n+a：表示选择第 a 个之前的元素；n+a：表示选择第 a 个之后的元素）。
```
<style>
    // 选择下标是 3 的倍数加上 1 的元素，即 1、4、7...
	h3:nth-child(3n+1) {
      color: red;
    }
</style>

<div>
  <h3>我是第一个子元素</h3> // 此段文本变为红色
  <h3>我是第二个子元素</h3>
  <h3>我是第三个子元素</h3>
  <h3>我是第四个子元素</h3> // 此段文本变为红色
  <h3>我是第五个子元素</h3>
  <h3>我是第六个子元素</h3>
  <h3>我是第七个子元素</h3> // 此段文本变为红色
</div>
```
A:nth-of-type(n)：匹配 A 的父元素中的第 n 个 A 元素（匹配 A 的父元素中的同种 A 标签中的第 n 个 A）。n 从 1 开始计算。
A:nth--last-of-type(n)：匹配 A 的父元素中的倒数第 n 个 A 元素。n 从 1 开始计算。
A:first-of-type：匹配 A 的父元素中的第一个 A 元素。
A:last-of-type：匹配 A 的父元素的最后一个 A 元素。
A:only-of-type：匹配 A 的父元素中只有一个的 A 元素，可以包含其他元素，但是只能有一个 A 元素。
```
<style>
	// 匹配同层级 h3 类型中的第一个 h3
	h3:nth-of-type(1) {
      color: red;
    }
    // 匹配同层级 h3 类型中的第二个 h3
    h3:nth-of-type(2) {
      color: green;
    }
</style>

<div>
  <h3>我是第一个子元素</h3> // 此段文本变为红色
  <p>我是第二个子元素</p>
  <span>我是第三个子元素</span>
  <h3>我是第四个子元素</h3> // 此段文本变为绿色
</div>
```
A:empty：匹配空标签。

A:not(B)：否定伪类选择器。匹配所有过滤掉 B 的 A 元素。

p:not(.myp){
    color:red;//匹配所有过滤掉class=”myp”的p元素
}

A:target：目标伪类选择器。用于当前活动的被链接的元素的样式。

:target{
     color:red;//点击a链接之后，p元素将会显示指定样式
}

<a href=”#myp”>跳转到p1</a>
<p id=”myp”>hello world</p>

UI 伪类选择器：

指定的样式只有在元素处于某种状态下才起作用，在默认状态下不起作用。

:enabled：匹配可用的元素。
:disabled：匹配设置了 disabled 属性的元素。
```
input:enabled{
       background:red;
}
```
:read-write：匹配可读及可写的元素。
:read-only：匹配设置了 readonly 属性的元素。
:out-of-range：用于标签的值在指定区间之外时显示的样式。
:in-range：用于标签的值在指定区间之间时显示的样式。
```
<input type="number" min="5" max="10" value="17" />
input:out-of-range	{
  border: 2px solid red;
}
```
:optional：匹配可填可不填的输入元素。
:required：匹配设置了 required 属性的元素。
:valid：匹配输入值合法的元素。
:invalid：匹配输入值非法的元素。
:focus：匹配获得焦点的元素。
:checked：匹配设置了checked 属性的元素。

伪元素选择器：

伪元素表示虚拟动态创建的元素，采用双冒号写法。

::before：创建一个伪元素，并将其作为匹配选中元素的第一个子元素。必须设置 content 属性表示其中的内容，至少是空。
::after：创建一个伪元素，并将其作为匹配选中元素的最后一个子元素。必须设置 content 属性表示其中的内容，至少是空。

这些添加的内容不会出现在 DOM 中，不会改变文档内容，不可复制，仅仅是在 css 渲染层加入。所以不要用 ::before 或 ::after 展示有实际意义的内容，尽量使用它们显示修饰性内容。

content 可取以下值：
- string：使用引号包裹一段字符串，将会向元素内容中添加字符串。
```
p::before{
   	content: "《";
   	color: blue;			
}
p::after{
   	 content: "》";
   	 color: blue;
}

<p>平凡的世界</p>
   ```
```
- attr()：通过 attr() 调用当前元素的属性。
```
  a::after{
      content: "(" attr(href) ")";
  }

 <a href="http://www.cnblogs.com/starof">starof</a>
```
- url()/uri()：用于引用媒体文件。
```
a::before{
    content: url("https://www.baidu.com/img/baidu_jgylogo3.gif");
}

<body><a>百度</a></body>   
```
::selection：匹配被用户选取高亮的部分。
```
::selection{
    color:#ff0000;
}
```
::first-line：匹配元素的第一行，只能是块级元素。
::first-letter：匹配元素的第一个字，只能是块级元素。