选择器
选择器(重点)
要想将 CSS 样式应用于特定的 HTML 元素,首先需要找到该目标元素。在 CSS 中,执行该任务的样式规则被称为 选择器 (选择符)
。
标签选择器(元素选择器)
标签选择器是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。其基本语法格式如下:
标签名 { 属性1:属性值1 ; 属性2:属性值2 ; 属性3:属性值3; }
- 或者
元素名 { 属性1:属性值1 ; 属性2:属性值2 ; 属性3:属性值3; }
标签选择器最大的有点是:能快速为页面中同类型的标签统一样式,同时这也是它的缺点——不能设计差异化样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V9-字体大小</title>
<style>
p {
/*以标签分类的称为 标签选择器*/
font: italic normal 14px "Microsoft YaHei";
color: red;
}
div {
/*以标签分类的称为 标签选择器*/
font: 16px "Microsoft YaHei";
color: yellowgreen;
}
</style>
</head>
<body>
<p>白展堂</p>
<p>吕秀才</p>
<p>李大嘴</p>
<div>鸣人</div>
<div>佐助</div>
<div>卡卡西</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
类选择器
类选择器
类选择器使用 英文句号 .
进行标识,后面紧跟类名,其基本语法格式为:.类名 { 属性1:属性值1 ; 属性2:属性值2 ; 属性3:属性值3; }
标签调用时使用 class=“类名”
即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V9-字体大小</title>
<style>
.mingren {
/*声明类样式*/
color: red;
}
.zuozhu {
color: yellowgreen;
}
.kakaxi {
font-size: 24px;
}
</style>
</head>
<body>
<!--调用类样式-->
<div class="mingren">鸣人</div>
<div class="zuozhu">佐助</div>
<div class="kakaxi">卡卡西</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
显示效果:
CSS 标签命名规范
- 长名称或词组可以使用**中横线 - **为选择器命名
- 不建议使用下划线 _ 来命名 CSS 选择器。(可能会有兼容问题)
- 不要用纯数字或者中文命名
课堂案例--Google 的 logo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V9-字体大小</title>
<style>
span {
font-size: 26px;
}
.c-blue {
color: blue;
}
.c-red {
color: red;
}
.c-orange {
color: orange;
}
.c-green {
color: green;
}
</style>
</head>
<body>
<span class="c-blue">G</span>
<span class="c-red">o</span>
<span class="c-orange">o</span>
<span class="c-blue">g</span>
<span class="c-green">l</span>
<span class="c-red">e</span>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
显示效果如下:
多类名选择器
<div class="cover J-cover"></div>
,像这种一个 HTML 元素引用多个类名的情况,就称为多类名选择器。多用于负责的页面布局中。
- 样式显示效果与 HTML 元素中类名的先后顺序无关,而是取决于 CSS 样式书写的上下顺序
- 各类名之间使用空格分开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V9-字体大小</title>
<style>
.font-14 {
font-size: 14px;
}
.font-20 {
font-size: 20px;
}
.c-red {
color: red;
}
</style>
</head>
<body>
<!--多类名选择器,使用空格分割-->
<div class="font-14 c-red">亚瑟</div>
<!--在 style 中 font-20 后定义,所以,最终 font-20 生效-->
<div class="font-14 font-20">刘备</div>
<!--在 style 中 font-20 后定义,所以,font-20 为最终效果-->
<div class="font-20 font-14 c-red">安其拉</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
显示效果:
id
选择器
id 选择器
使用 #
进行标识,后面紧跟 id 名称
, 其基本语法为:#id 名 { 属性1:属性值1 ; 属性2:属性值2; 属性3:属性值3; }
- 该语法中,
id 名
即为 HTML 元素的 id 属性值, - 大多数 HTML 元素都可以定义 id 属性,
- 元素的 id 是唯一的,只能对应文档中某一个具体的元素
id 选择器的用法基本等同于类选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V9-字体大小</title>
<style>
<!--标签选择器,以#开头-- >
#big-bear {
font-size: 14px;
color: red;
}
.small-bear {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<div id="big-bear">熊大</div>
<div class="small-bear">熊二</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
显示效果:
id
选择器和类选择器的区别
- 类选择器 好比人的名字,是可以重复使用的——重名
- id选择器 好比人的身份证号,是不会重复的,一人只能有一个身份证号
通配符选择器
通配符选择器用 *
表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素,其基本语法如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V9-字体大小</title>
<style>
* {
/*通配符选择器会改变全部,慎用*/
font-size: 14px;
color: red;
}
</style>
</head>
<body>
<p>熊大</p>
<div>熊二</div>
<span>光头强</span>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果,比如可以选择第1个,第 N 个元素。
伪类选择器使用 冒号 :
标识,比如::link { }
链接伪类选择器
:link
未访问的链接:visited
已经访问过的链接:hover
鼠标移到链接上:active
点击未松开时
书写的时候,他们的顺序不能颠倒,按照 lvha
顺序书写——记忆法:lv 的包包就是 hao
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V21-链接伪类选择器</title>
<style>
a:link {
font-size: 14px;
color: red;
}
a:visited {
font-size: 18px;
color: gray;
}
a:hover {
font-size: 22px;
color: green;
}
a:active {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
链接伪类选择器
<div><a href="#"> 点击有惊喜1</a></div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
显示效果1:未点击时的状态:
显示效果2:点击之后的状态:
实际使用时,下面这种用法更多:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V21-链接伪类选择器</title>
<style>
a {
/*标签选择器*/
font-weight: 700;
font-size: 22px;
color: gray;
}
a:hover {
/*链接伪类选择器*/
color: red;
}
</style>
</head>
<body>
链接伪类选择器
<div><a href="#"> 点击有惊喜1</a></div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
结构(位置)伪类选择器
结构伪类选择器是 CSS3 中增加的内容。
:first-child
选取属于其父元素的首个子元素的指定选择器:last-child
选取属于其父元素的最后一个子元素的指定选择器:nth-child(n)
选取属于其父元素第 N 个子元素的选择器,不关心子元素的类型:nth-last-child(n)
选取属于其父元素的倒数第 N 个子元素,不区分元素的类型- 前面两个中的
n
可以是数字、关键词或公式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V21-链接伪类选择器</title>
<style>
li:first-child {
color: red;
font-size: 14px;
}
li:last-child {
color: orange;
font-size: 24px;
}
li:nth-child(3) {
color: magenta;
font-size: 18px;
}
li:nth-last-child(3) {
color: blue;
font-size: 22px;
}
li:nth-child(even) {
/*第偶数个元素的位置伪类选择器,传递 odd 则是选择第奇数个元素*/
color: green;
font-size: 20px;
}
li:nth-child(7n) {
/*第8的倍数位置元素的伪类选择器,也可以传递诸如:2n+1 这种表达式*/
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
<ul>
<li>第1个子元素</li>
<li>第2个子元素</li>
<li>第3个子元素</li>
<li>第4个子元素</li>
<li>第5个子元素</li>
<li>第6个子元素</li>
<li>第7个子元素</li>
</ul>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
显示效果如下:
目标伪类选择器
目标伪类选择器用 :target
表示,可以用于选取当前活动的目标元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>V26-目标伪类选择器</title>
<style>
:target {
/*目标选择器,作用于当前被选中的标签*/
color: red;
}
</style>
</head>
<body>
<h4>
<a href="#p1">标题1 </a>
</h4>
<h4>
<a href="#p2">标题2 </a>
</h4>
<h4>
<a href="#p3">标题3 </a>
</h4>
<h4>
<a href="#p4">标题4 </a>
</h4>
<p id="p1"> 标题1的描述</p>
<p id="p2"> 标题2的描述</p>
<p id="p3"> 标题3的描述</p>
<p id="p4"> 标题4的描述</p>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
显示效果——初始进入页面的效果:
显示效果——某个内容被选中时的效果: