CSS-选择符的分类

红乐呀！

于 2021-10-19 19:29:32 发布

阅读量163

点赞数

分类专栏： JavaWeb 文章标签： CSS选择器 ID选择器类选择器组合选择器 HTML

本文链接：https://blog.csdn.net/qq_19037931/article/details/120852643

版权

JavaWeb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

*1. 标签名选择器
(1)语法格式：

标签名{
	属性：值;
}
例如：
	P{
		color:red;
	}

（2）例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 选择器</title>
<style type="text/css">
	div{
	border: 1px solid yellow;
	color: blue;
	font-size: 30px;
	}
	span{
	border: 5px dashed blue;
	color: yellow;
	font-size: 20px;
	}
</style>
</head>
<body>
		<div>div 标签 1</div>
		<div>div 标签 2</div>
		<span>span 标签 1</span>
		<span>span 标签 2</span>
</body>
</html>

2. id 选择器
（1）语法格式：

id 选择器的格式是：
	#id 属性值{
		属性：值;
	}

	例如：
	#id001{
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
		}

（2）例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ID 选择器</title>
<style type="text/css">
	#id001{
	color: blue;
	font-size: 30px;
	border: 1px yellow solid;
	}
</style>
</head>
<body>
	<div id="id001">div 标签 2</div>
</body>
</html>

3. 类选择器
（1）语法格式：

class 类型选择器的格式是：
	.class 属性值{   //注意class之前有一个点
		属性：值;
	}
	
	例如：
	.class01{
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}

（2）例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
	.class01{
	color: blue;
	font-size: 30px;
	border: 1px solid yellow;
	}
	.class02{
	color: grey;
	font-size: 26px;
	border: 1px solid red;
	}
</style>
</head>
<body>
	<div class="class02">div 标签 class01</div>
	<div class="class02">div 标签</div>
	<span class="class02">span 标签 class01</span>
	<span>span 标签 2</span>
</body>
</html>

4. 组合选择器
（1）语法格式：

	选择器 1，选择器 2，选择器 n{
		属性：值;
	}
	例如：
	.class01 , #id01{
			color: blue;
			font-size: 20px;
			border: 1px yellow solid;
		}

（2）例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>class 类型选择器</title>
<style type="text/css">
	.class01 , #id01{
	color: blue;
	font-size: 20px;
	border: 1px yellow solid;
	}
</style>
</head>
<body>
	<div id="id01">div 标签 class01</div> <br />
	<span >span 标签</span> <br />
	<div>div 标签</div> <br />
	<div>div 标签 id01</div> <br />
</body>
</html>

红乐呀！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-选择符的分类

*1. 标签名选择器(1)语法格式：标签名{ 属性：值;}例如： P{ color:red; }（2）例子：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS 选择器</title><style type="text/css"> div{ border: 1px solid yellow; color: blue;
复制链接

扫一扫

专栏目录