第1篇：CSS基本选择器（CSS)_什么是格式化网页的标准方式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/95618119

本文深入讲解CSS中的元素、类、ID及通用选择器，探讨如何有效控制网页样式，包括伪类和伪元素选择器的使用，助您掌握网页布局精髓。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css介绍

1、CSS（层叠样式表）是一种格式化网页的标准方式，用于设置网页的样式，并允许样式信息与网页内容分离的一种技术。

2、好处：

（1）将格式和结构分离

（2）精确控制页面布局

（3）制作体积更小、下载更快的网页

（4）可以实现许多网页同时更新

基本选择器

元素选择器

元素选择器是最常用的一种选择器，元素选择器声明了网页中所有相同元素的显示效果

基本语法：HTML元素{属性1：属性值1；属性2：属性值2；...}

类选择器

对相同元素的某些元素做特殊效果设置。

基本语法：.类选择器名{属性1：属性值1；属性2：属性值2；...}

说明：类选择器名称的第1个字符不能使用数字;类选择器的优先级高于元素选择器，所以相同属性的样式，类选择器的样式会覆盖元素选择器的样式，

类名在HTML页面中可以重名。

ID选择器

ID名称站在HTML页面中必须唯一。

基本语法：#id选择器名{属性1：属性值1；属性2：属性值2；...}

说明：id选择器名称的第一个字符不能使用数字；id选择器名不能有空格。

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>css基本选择器的使用</title>
		<style type="text/css">
			*{
				margin:0px;
				padding:0px;
				}
			p{color: goldenrod;}
			h3{color: blueviolet;}
			h4{color: rosybrown;}
			
			.txt01{
				color: #8A2BE2;
			}
			.txt02{
				color: tomato;
			}
			.txt03{
				color: saddlebrown;
			}
			.txt04{
				color: sienna;
			}
			
			#txt01{
				text-align: center;
				color: rosybrown;
				
			}
			#txt02{
				text-align: center;
				font: 楷体;
				color: goldenrod;
			}
			#txt03{
				font: 楷体;
				font-size: 22px;
				align-content: center;
				text-align: center;
				color: chocolate;
				margin: auto;
			}
			#txt04{
				text-align: center;
				color: forestgreen;
			}			
		</style>
	</head>
	<body>
		<h3>this is the head title!</h3>
		<h4>this is the second title!</h4>
		<p>古诗词鉴赏</p>
		
		<h1 class="txt01">欢迎来到类选择器</h1>
		<h2 class="txt02">数据分析总结表</h2>
		<table class="txt03" border="2" width="200" cellspacing="0">
			<tr>
				<td>01</td>
				<td>02</td>
				<td>03</td>
				<td>04</td>
				<td>05</td>
			</tr>
			<tr>
				<td>12.9</td>
				<td>12.4</td>
				<td>13.9</td>
				<td>12.3</td>
				<td>11.9</td>
			</tr>
		</table>
		<p class="txt04">分析结果</p>
		
		<table id="txt03" border="1" cellpadding="8" cellspacing="0" width="400"> 
			<tr>
				<td>第一期</td>
				<td>第二期</td>
				<td>第三期</td>
				<td>第四期</td>
				<td>第五期</td>
			</tr>
			<tr>
				<td>34.90</td>
				<td>46.97</td>
				<td>35.15</td>
				<td>45.33</td>
				<td>50.01</td>
			</tr>
			<tr>
				<td>34.90</td>
				<td>46.97</td>
				<td>35.15</td>
				<td>45.33</td>
				<td>50.01</td>
			</tr>
		</table>
		<p id="txt04">总结分析：</p>

	</body>
</html>

通用选择器

通用选择器用通配符“*”表示，可以选择文档中的所有元素。通用选择器主要用于重置文档各元素的默认样式，一般用来重置文档元素的内、外边距。

基本语法：*{属性1：属性值1；属性2：属性值2；...}

常用：*{margin:0px;padding:0px;}//重置文档所有元素的内、外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>通用选择器</title>
		<style type="text/css">
			*{
				text-align: center;
				font-size: 24px;
				color: chocolate;
				font: "楷体";
				margin: auto;
				}
		</style>
	</head>
	<body>
		<p> 欢迎来到通用选择器页面</p>
		<table border="2">
			<tr>
				<td>01</td>
				<td>02</td>
				<td>03</td>
				<td>04</td>
				<td>05</td>
			</tr>
			<tr>
				<td>12.9</td>
				<td>12.4</td>
				<td>13.9</td>
				<td>12.3</td>
				<td>11.9</td>
			</tr>
		</table>
	</body>
</html>

伪类选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器的使用</title>
		<style type="text/css">
			
			a:link{
				color: green;
				text-decoration: none;
				/*无下划线*/
			}
			
			a:visited{
				color: darkblue;
			}
			a:hover{
				color: #D2691E;
			}
			a:active{
				color: mediumvioletred;
			}
			
			input:focus{
				background: #BC8F8F;
			}
			p:first-child{
				font-size: 30px;
				color: firebrick;
			}
			li:first-child{
				color: slateblue;
			}
			q:lang(no){
				color: cornflowerblue;
				font-size: 30px;
			}
			q:lang(zh){
				color: darkmagenta;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<a href="https://blog.youkuaiyun.com/weixin_40119412/article/details/103562086">html基础-图片标签</a>
		<br />
		<a href="https://blog.youkuaiyun.com/weixin_40119412/article/details/103561685">html基础-列表标签</a>
		<br />
		<a href="https://blog.youkuaiyun.com/weixin_40119412/article/details/103570161">htnl基础-表格</a>
		<br />		
		<a href="https://blog.youkuaiyun.com/weixin_40119412/article/details/103570404">html基础-表单</a>
		
		<form action="">
			姓名：<input type="text"/>
			<br />
			性别：<input type="radio" checked="checked" name="sex"/>男
			<input type="radio" name="sex"/>女
		</form>
		<p >reckon<q lang="no">interpre</p>
		<p>think<q lang="zh">interpre</p>
		<p>consider</p>
		<p>deem</p>
		
		<ol type="A">
			<li>vitical</li>
			<li>impotant</li>
			<li>essential,paramount</li>
		</ol>
		<div id="">
			<p>reckon</p>
			<p>think</p>
			<p>consider</p>
			<p>deem</p>
			</div>
	</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素选择器的使用</title>
		<style type="text/css">
			p:first-letter{
				font-size: 22px;
				color: saddlebrown;
				text-decoration:underline;
			}
			/*p:line{
				color: slateblue;
			}
			p:before{
				content: url(../img/bg.JPG);
			}
			p:after{
				content: url(../img/bg.JPG);
			}*/
		</style>
	</head>
	<body>
		<p>伪元素选择器：当选择器是类选择器时，为了限定某类元素，也可以在类选择器名前加上元素名，即将选择器名写成：元素名.类选择器名。</p>
		<p>
		伪类选择器说明：当选择器是类选择器时，为了限定某类元素，也可以在类选择器名前加上元素名，即将选择器名写成：元素名.类选择器名。				
		</p>
		<p>层叠样式表（Casading Style Sheet)是一种格式化网页的标准方式，用于设置网页的样式，并允许样式信息与网页内容分离的一种技术。</p>
		<p>元素选择器是最常用的一种选择器，元素选择器声明了网页中所有相同元素的显示效果</p>

	</body>
</html>