前言:要想将CSS样式用于特定的HTML元素,首先需要找到该目标元素,在CSS中,执行这一任务的样式规则部分被称为选择器。
目录
一、选择器的分类
1、标签选择器
2、类选择器
3、多类名选择器
4、id选择器
5、通配符选择器
6、伪类选择器
7、链接伪类选择器
8、结构伪类选择器
9、目标伪类选择器
二、具体使用方法
1、标签选择器
标签选择器是指用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>Document</title>
<style>
h1 {
font-size: 30px;
font-family: "微软雅黑";
color: pink;
}
p {
font-size: 16px;
font-family: "微软雅黑";
color: purple;
}
div {
font-size: 14px;
font-family: "微软雅黑";
color: skyblue;
}
</style>
</head>
<body>
<h1>HTML</h1>
<p>这是我的一个小代码块</p>
<div>我最喜欢的人是彭昱畅</div>
</body>
</html>
执行结果如下图:
2、类选择器
类选择器使用“.”进行标识,后面紧跟类名。基本语法格式如下:
.类名:{属性1:属性值1;属性2;属性值2;属性3:属性值3;}
优点:可以为元素定义单独或相同的样式
代码块如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.cike{ /* 声明类样式 */
font-size: 20px;
color: pink;
}
.fashi{
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<div class="cike" >阿珂</div> <!-- 引用类样式 -->
<br />
<div class=".fashi" >妲己</div>
<br />
<div class="cike" >赵云</div>
<br />
<div class=".fashi">貂蝉</div>
</body>
</html>
结果如下图所示:
在此处我们可以看到类选择器是可以多次引用的,赵云和阿珂均引用了类.cike,妲己和貂蝉均引用了.fashi,最后这两项的处理结果也是相同的,由此我们可以看出一个类声明之后是可以被多次引用的。
补充类名的命名规则:
(1)长名称或词组可以使用中横线来为选择器命名;
(2)不建议同下划线“_”来命名css选择器;
(3)不要使用纯数字或中文命名。
3、多类名选择器
可以给标签指定多个类名,从而达到更多的选择的目的。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*多类名选择器*/
.font40 {
font-size: 40px;
}
.font20 {
font-size: 20px;
}
.pink {
color: pink;
}
.purple {
color: purple;
}
</style>
</head>
<body>
<div class="font40 pink" >彭昱畅</div>
<div class="font20 purple">张子枫</div>
<div class="font40 pink">刘昊然</div>
<div class="font20 purple">李钟硕</div>
</body>
</html>
处理结果如下:
在一个标签中可以调用多个类名,类名之间相互不会产生冲突,调用的形式是 class=“类名1 类名2 ...”,而用class=“类名1” class="类名2"的形式是错误的。
注:(1)样式显示效果跟HTML中类名的先后顺序没有关系,与CSS样式书写的上下关系有关。
(2)各个类名中间应该用空格隔开。
4、id选择器
与类选择器相似,用“#”声明类样式,用id=“类名”进行调用。
代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#an {
font-size: 20px; /* ID选择器只能调用一次,而类选择器可以多次调用 */
color: pink;
}
#diao{
font-size: 40px;
color: blue;
}
</style>
</head>
<body>
<div id="an">安琪拉</div>
<br />
<div id="diao">貂蝉</div>
</body>
</html>
结果如下:
id选择器和类选择器的区别:
类选择器相当于人的姓名,是可以多次重复使用的,id选择器相当于身份证号,不可以重复使用,只能调用一次。
5、通配符选择器
通配符选择器用“*”表示,它是所有选择器中作用范围最广的,能匹配页面中的所有元素,其基本语法格式如下:
* {属性1:属性值1;属性2:属性值2;属性3:属性值3;}
代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*通配符选择器*/
* {
font-weight: 700; /* *是所有选择器中作用范围最广的,能匹配页面中的所有元素 */
font-size: 20px;
color: purple;
}
</style>
</head>
<body>
<div class="font40 pink" >彭昱畅</div>
<div class="font20 purple">张子枫</div>
<div class="font40 pink">刘昊然</div>
<div class="font20 purple">李钟硕</div>
</body>
</html>
结果如下:
========================================分割线================================================
伪类选择器见下篇博克》==《