本篇对CSS四大选择器进行了详细讲解和对比。
目录
前言
选择器分为基础选择器和复合选择器两大类。
基础选择器包括:标签选择器、类选择器、ID选择器、通配符选择器
一、标签选择器
1.含义:
指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式,比如所有的div,所有的span。
2.语法:
标签名{
属性1 : 属性值1;
属性2 : 属性值2;
属性3 : 属性值3;
}
3.使用案例:
使h3标题呈现出红色,宋体的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试一下</title>
<style>
h3 {
font-family: '宋体';
color: red;
}
</style>
</head>
<body>
<h3 style="text-indent:4em">望岳</h3>
<p>
岱宗夫如何?齐鲁青未了。<br />
造化钟神秀,阴阳割昏晓。<br />
荡胸生层云,决眦入归鸟。<br />
会当凌绝顶,一览众山小。<br />
</p>
</body>
</html>
二、类选择器(最常用)
1.含义:
如果想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器
2.语法:
.类名{
属性1: 属性值1;
}
3.使用案例:
例一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试一下</title>
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="red">红楼梦</li>
<li class="blue">水浒传</li>
<li>西游记</li>
</ul>
</body>
</html>
效果:
例二:
画三个盒子,第一个颜色是红,第二个是蓝,第三个是红,同时改变蓝色的字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试一下</title>
<style>
.box {
width: 100px;
height: 100px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.font40 {
font-size: 40px;
}
</style>
</head>
<body>
<div class="box red ">red1</div>
<div class="box blue font40">blue</div><!--用空格分隔,可以一次使用多个样式-->
<div class="box red">red2</div>
</body>
</html>
这个例子说明,我们可以一次性使用多个class,用空格分隔,写在一起就行
效果:
三、id选择器
1.定义:
id选择器用 # 号定义样式,和类选择器很像
2.语法:
# id名 {
属性1:属性值1;
................
}
3.id选择器与类选择器的区别
-
定义时 id选择器用 # 定义,类选择器用 . 定义。
-
使用时 id选择器用 id=“ ” ,类选择器用 class=“ ”
-
使用次数不同。id选择器只可以使用一次,类选择器可以使用多次。比如id是身份证号,每个人身份证号都不一样,身份证号不重复,就像id只使用一次,而类选择器就像姓名,人可以重名。
-
id选择器一般用于页面唯一性的元素上,经常和JavaScript搭配使用,类选择器在修改样式用的最多。
4.使用案例
类比 类选择器的使用,把class= " " 改成 id= " " 就行
四、通配符选择器
1.定义:
使用 * 定义,表示选取页面中所有元素(标签)
2.语法:
* {
属性1:属性值1;
................
}
3.使用案例:
例:
* {
color: red;
}
使页面所有文字都变成红色,无需额外调用,定义后就生效
总结