选择器

最新推荐文章于 2022-05-03 21:44:52 发布

lhrdlp

最新推荐文章于 2022-05-03 21:44:52 发布

阅读量1.6k

点赞数 5

分类专栏： css

本文链接：https://blog.csdn.net/lhrdlp/article/details/101037157

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言：要想将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>

结果如下：

========================================分割线================================================

伪类选择器见下篇博克》==《

lhrdlp

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
选择器

前言：要想将CSS样式用于特定的HTML元素，首先需要找到该目标元素，在CSS中，执行这一任务的样式规则部分被称为选择器。目录一、选择器的分类二、具体使用方法1、标签选择器2、类选择器3、多类名选择器4、id选择器5、通配符选择器一、选择器的分类 1、标签选择器 2、类选择器3、多类名选择器4、id选择器5、通配符选择器6、伪类选...
复制链接

扫一扫