后代选择器
后代选择器又称为包含选择器，可以选择父元素中的后代元素。
语法：
元素1 元素2,元素3…元素n { 样式 } —— 选择元素1中 的所有后代元素2、元素3…元素n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body div, strong {
color: red;
}
</style>
</head>
<body>
<div>码农浅知-高质量码农编程学习笔记</div>
<span>
<strong>码农浅知-高质量码农编程学习笔记</strong>
</span>
</body>
</html>
|
子选择器
子选择器只能选择某元素的最近一级子元素。
语法：
元素1 > 元素2,元素3…元素n { 样式 } —— 选择元素1中所有子元素2、元素3…元素n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body > div, span {
color: red;
}
</style>
</head>
<body>
<div>码农浅知-高质量码农编程学习笔记</div>
<span>
<strong>码农浅知-高质量码农编程学习笔记</strong>
</span>
</body>
</html>
|
并集选择器
并集选择器可以选择多组标签，同时为它们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过 , 连接而成，任何形式的选择器都能作为并集选择器的一部分。
语法：
元素1,元素2…元素n { 样式 } —— 选择元素1、元素2…元素n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, span {
color: red;
}
</style>
</head>
<body>
<div>码农浅知-高质量码农编程学习笔记</div>
<span>
<strong>码农浅知-高质量码农编程学习笔记</strong>
</span>
</body>
</html>
|
链接伪类选择器
所有标签都可添加，遵循LVHA书写顺序。
1
2
3
4
5
6
7
| a:link —— 选择所有未被访问的链接。
a:visited —— 选择所有已被访问的链接。
a:hover —— 选择鼠标指针位于其上的链接。
a:active —— 选择活动链接（鼠标按下未弹起）。
|
focus伪类选择器
:focus 伪类选择器用于选取获得焦点（光标）的表单元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input:focus {
background-color: red;
}
</style>
</head>
<body>
<form>
<input type="password">
</form>
</body>
</html>
|
