在上一节中我们学习了CSS语法及如何引入CSS文件,这一小节,我们来学习CSS重要的两个选择器——id和class选择器。
通过上一节我们知道要想把一段落字体变成红色,我们可以在<head></head>元素利用<style></style>标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
/* 设置字体为红色 */
color: red;
}
</style>
</head>
<body>
<p>大娃,力大无穷</p>
<p>二娃,耳聪目明</p>
<p>三娃,铜墙铁壁</p>
</body>
</html>
打开页面会发现,我们写的三个段落里面的字体都是红色,这时候产品经理提需求不要三个都是红色,要大娃是红色,加粗;二娃是橙色,变斜;三娃是黄色,有下划线。这个时候该怎么写样式呢?有人可能会想到直接在标签前面加上style写上这些属性也就是行内样式,有这个想法的是很棒的!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
p {
/* 设置字体为红色 */
color: red;
}
</style>
</head>
<body>
<p style="color: red; font-weight: bold">大娃,力大无穷</p>
<p style="color: orange; font-style: italic">二娃,耳聪目明</p>
<p style="color: yellow; text-decoration: underline">三娃,铜墙铁壁</p>
</body>
</html>
利用行内样式我们达到了这个效果,在这里有些人可能会疑惑style里面的属性还在,但是p元素不受影响,这是为什么呢?这个就涉及到优先级问题,现在我们记住行内样式优先级大于style里面的样式。关于优先级详细内容可以看下CSS创建这一小节。
到了这打开页面,会发现黄色在白色背景下不显眼,这是产品经理有发话了,‘我要三娃跟大娃样式一样’。为了达到这个需求我们可以继续用行内样式,但如果后续有四娃、五娃等等也要求这样代码就有很多重复了,而且当一个样式要求变多时,再用行内样式就不太好维护了。所以我们要换种方式,也就是本节主角——选择器。
Id和Class选择器
我们可以通过选择器设置样式,选择器分为两种一种是id,一种是class。我们需要记住id优先级大于class选择器。
- Id选择器:id选择器可以为标有特定id的元素设置样式,在书写CSS样式时需要在对应id名前面加上‘#’。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* id选择器 */
#p1 {
color: red;
font-weight: bold;
}
p {
/* 设置字体为红色 */
color: red;
}
</style>
</head>
<body>
<p style="color: red; font-weight: bold">大娃,力大无穷</p>
<p style="color: orange; font-style: italic">二娃,耳聪目明</p>
<p id="p1">三娃,铜墙铁壁</p>
</body>
</html>
- Class选择器:描述一组元素样式,在书写是需要在对应class名前面加上点‘.’表示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* id选择器 */
#p1 {
color: red;
font-weight: bold;
}
/* class选择器 */
.p2 {
color: red;
font-weight: bold;
}
p {
/* 设置字体为红色 */
color: red;
}
</style>
</head>
<body>
<p class="p2">大娃,力大无穷</p>
<p style="color: orange; font-style: italic">二娃,耳聪目明</p>
<p class="p2">三娃,铜墙铁壁</p>
</body>
</html>
Id和Class区别
通过上面对选择器的描述我们可以总结出来,id是给特别id的元素设置样式的,它是对单个元素而言的,class是对一组的,所有它可以重复使用,也正因如此,它也被称为类选择器。正如我们前面提到过的,id选择器优先级要比class选择器高。学到这产品经理有提到最后一个要求,就是把大娃、三娃都变成蓝色,我们一起用id选择器实现下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* id选择器 */
#p1 {
color: skyblue;
}
#p3 {
color: skyblue;
}
/* class选择器 */
.p2 {
color: red;
font-weight: bold;
}
p {
/* 设置字体为红色 */
color: red;
}
</style>
</head>
<body>
<p id="p1" class="p2">大娃,力大无穷</p>
<p style="color: orange; font-style: italic">二娃,耳聪目明</p>
<p id="p3" class="p2">三娃,铜墙铁壁</p>
</body>
</html>
这里我们为了体现出来id优先级高,就将id与class混用了。一般我们用class类选择器就可以啦。