CSS选择器学习笔记

发表于 | 更新于 | 分类于

基本选择器

通用选择器

* 匹配文档中的所有元素。（包括 html 与 body 元素）

1
2
3
4
5
6
7
/*normalize.css*/
* {  
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;}

类型选择器

匹配某一类元素。
a {...} 会匹配所有 a 元素。

类选择器

匹配指定的class属性的元素。
.box {...} 会匹配所有 class 名为box的元素。
*.box {...} 会匹配所有 class 名为box的元素。
a#link {...} 会匹配 id 名为link的 a 元素。

ID选择器

匹配指定的id属性的元素。
#box {...} 会匹配 id 名为box的元素。

复合选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
	<title>复合选择器</title>
</head>
<body>
	<h1>...</h1>
	<h2>...</h2>
	<div class="title">
		<p id="part1">...<span>...</span>...</p>
	</div>
</body>
</html>

并集选择器

选择器a, 选择器b, 选择器c 匹配指定选择器的多个元素。
h1, h2, #part1 {...} 会匹配h1，h2以及 id 是part1的三个元素。

后代选择器

选择器a 选择器b 匹配选择器a的元素的子元素（不一定为直接子元素），且这个子元素匹配选择器b。
.title span {...} 会匹配元素 class 是title的元素的 span 后代元素。

子元素选择器。

选择器a > 选择器b匹配选择器a的元素的直接子元素，且这个子元素匹配选择器b。
#part1 > span {...} 会匹配元素 id 是part1的元素的 span 子元素。

相邻同胞选择器

选择器a + 选择器b 匹配选择器a的元素的相邻兄弟元素，且这个相邻兄弟元素匹配选择器b。
h1 + h2 {...} 会匹配与 h1 元素相邻的 h2 兄弟元素。

普通同胞选择器

选择器a ~ 选择器b匹配选择器a元素的兄弟元素（不一定为相邻兄弟元素），且这个兄弟元素匹配选择器b。
h1 ~ .title {...} 会匹配 h1 元素的 class 是title的兄弟元素。

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
</head>
<body>
	<p class="title"></p>
	<form class="box">
		<input type="text">
		<input type="password">
	</form>
	<div class="box article">...<span lang="cn-zh">...</span>...</div>
</body>
</html>

简单选择器

[attr] 匹配一个指定属性的元素（与属性的值无关）。
input[type] {...} 会匹配所有带有 type 属性的 input 元素。

精准选择器

[attr="val"] 匹配一个指定属性的元素，且该属性的值为 val。
input[type="text"] {...} 会匹配所有 type 属性为 text 的 input 元素。

开头选择器

[attr^="val"] 匹配一个指定属性的元素，且属性的值以 val 字符串作为开头。
div[class^="box"] {...} 会匹配所有 class 名开头为box的 div 元素。

包含选择器

[attr*="val"] 匹配一个指定属性的元素，且属性的值带 val 字符串。
p[class*="t"] {...} 会匹配所有 class 名中带有t的 p 元素。

结尾选择器

[attr$="val"] 匹配一个指定属性的元素，且属性的值以 val 字符串作为结尾。
[class$="x"] {...} 会匹配所有 class 名结尾为x的元素。

部分选择器

[attr~="val"] 匹配一个指定属性的元素，且属性的值包含多个（以空格间隔），其中一个为字符串 val 。
div[class~="article"] {...} 会匹配所有 class 名有多个，且属性值其中一项为article的 div 元素。
[attr|="val"] 匹配一个指定属性的元素，且属性的值为连字符分割的多个值，其中第一个为字符串 val 。
[lang|="zh"] {...} 会匹配所有 lang 属性，且属性值中有zh的所有元素。

伪类

UI伪类

  • :enabled 匹配启用状态的元素。（不会匹配没有禁用状态的元素）
  • :disabled 匹配禁用状态的元素。（不会匹配没有禁用状态的元素）
  • :checked 匹配被选中的 input 元素。（适用于单选按钮和复选框）
  • :default 匹配一组类似元素中的默认元素。
  • :valid 和 :invalid 匹配符合和不符合输入验证要求的 input 元素。
  • :required 和 :optional 匹配具有required属性和没有required属性的 input 元素。

动态伪类

1
2
3
4
5
6
7
8
a:link {
    color: black;}
a:visited {
    color: gray;}
a:hover {
    text-decoration: underline;}
a:active {
    color: red;}
  • :link 未访问的链接元素。
  • :visited 已访问过的链接元素。
  • :hover 鼠标悬停的元素。

  • :active 被用户激活的元素。

  • :focus 在元素获得焦点时生效。
    input:focus {border:1px solid blue} 会使 input 元素在点击输入时出现边框。

结构伪类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
	<title>结构伪类</title>
	<style>
		:first-child {...} /*匹配第一个h1及p元素*/
		:last-child {...} /*匹配body，第二个h1及p元素*/
		:only-child {...} /*匹配p元素*/
		:only-of-type {...} /*匹配body，div及p元素*/
	</style>
</head>
<body>
	<h1>...</h1>
	<div>
		<p>...</p>
	</div>
	<h1>...</h1>
</body>
</html>
  • :first-child 选取元素中的第一个子元素。
  • :last-child 选取元素中的最后一个子元素。
  • :only-child 选取元素的唯一一个子元素。
  • :only-of-type 选取属于父元素的特定类型的唯一子元素。
  • :nth-child(n)
    n可以为数字，即选取父元素中的第n个元素。
    n可以为odd，即选取父元素中所有第奇数个元素。
    n可以为even，即选取父元素中所有第偶数个元素。
  • :nth-of-type(n) 选取属于父元素的特定类型的第n个子元素。
  • :nth-last-of-type(n) 选取属于父元素的特定类型的倒数第n个子元素。
  • :root 根元素选择器，返回 html。

其他伪类

  • :not() 否定选择器对任意选择取反。
  • :empty 匹配没有任何子元素的元素。
  • :target 点击一个指向页面中其他元素的链接，则那个元素即可用:target选中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <title>:target</title>
    <style>
         :target {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <a href="#anchor">点击跳转段落一</a>
    <p id="anchor">段落一</p>
    <p>段落二</p>
    <p>段落三</p>
</body>
</html>

伪元素

::first-letter

选中文本段落的首字符。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
	<title>::first-letter</title>
    <style>
        p::first-letter {font-size: 200%}
    </style>
</head>
<body>
    <p>可以用first-letter来创建首字符放大效果</p>
</body>
</html>

::first-line

选中文本段落的第一行。

::before和::after

在特定元素前面或后面添加特殊内容。
为浮动元素的父元素添加 ::after 来清除浮动。

1
2
3
4
5
.clearfix::after {
    content: ".";
	display: block;
	height: 0;
    clear: both;}

为 a 元素前后添加文本内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
	<title>::before和::after</title>
    <style>
        a::before {content:"请点击"}
		a::after {content:"跳转至首页！"}
    </style>
</head>
<body>
    <a href="https://all4one4all.github.io">all4one4all</a>
</body>
</html>