CSS选择器

一壶浊酒..

于 2024-09-09 21:51:20 发布

阅读量132

点赞数 1

分类专栏：前端开发文章标签： css 前端

本文链接：https://blog.csdn.net/qq_40107571/article/details/142069598

版权

前端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

id和class是元素的两个基本属性，用来给CSS或JavaScipt操作的。

id属性具有唯一性，同一个页面一个ID名只能出现一次。

class，就是类，在同一个页面的相同元素或者不同的元素设置相同的class，然后相同class的元素具有相同的CSS样式。

CSS选择器的作用就是将想要的元素选中，然后可以操作该元素的CSS样式。

CSS选中器非常多，常见的有元素选择器、id选择器、class选择器、后代选择器、群组选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"/>
		<title></title>
		<style type="text/css">
			/* 元素选择器 选择相同的元素 */
			div{color: cadetblue;}	
			span{color:cyan}
			
			/* id选择器  为每一个id设置一个id 每一个id前需要加上#  */
			#hh{color:red}
			/* class 选择器 类选择器，对相同class的元素进行CSS样式设置  class选择符前缀加上 . */
			.p{color:green}
		
		</style>
	</head>
	<body>
		<p>元素选择器</p>
		<div>HTML</div>
		<p>CSS</p>
		<span>JavaScript</span>
		<div>JQuery</div>
		<br />
		<p>id选择器</p>
		<div id="hh">前端开发</div>
		<br />
		<p>class选择器</p>
		<div class="p">床前明月光</div>
		<div class="p">疑是地上霜</div>
		
	</body>
</html>

后代选择器

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		/* 后代选择器 */
		/* #father div 表示id=father下所有div标签 */
		#father div{color: black;}
		#father p{color: blue;}
		
	</style>
</head>
<body>
	<div id="father">
		<div>床前明月光</div>
		<p>疑是地上霜</p>
	</div>
	
</body>
</html>

群组选择器

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<style type="text/css">
		/* 群组选择器是用逗号分开 */
		h1,div{color:red}
		p,span{color:black}
	</style>
</head>
<body>
	<h1>床前明月光</h1>
	<div>疑是地上霜</div>
	<p>举头望明月</p>
	<span>低头思故乡</span>
</body>
</html>