CSS选择器

xiaoxiaojinglinger

于 2020-07-27 22:41:49 发布

阅读量104

点赞数

本文链接：https://blog.csdn.net/m0_45128748/article/details/107623386

版权

CSS选择器

选择器有基础选择器、层次选择器、伪类选择器、伪元素选择器、属性选择器

基础选择器：
元素选择器（选择元素名） \ 如：p{color:red;}
ID选择器（#号+ID名）\ 如：#csdn{color:black;}
类选择器（.+class名） \ 如：.csdn{color:blue;}
通配符选择器（选择全部元素，不建议使用）\如：* {color：green}
并集选择器/组合选择器（多个不同的标签，应用相同的样式/声明冲突时，需要分开计算）\如：p,h1,span{color:red;}

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>class选择器测试</title>
	<style type="text/css">
		/*对所有class为myclass的元素起作用*/
		.myclass{
			width:240px;
			height: 40px;
			background-color: #dddddd;
		}
		/*对class为myclass的div元素起作用*/
		div.myclass{
			border:2px dotted black;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div class="myclass">HTML</div>
	<p class="myclass">CSS</p>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>id选择器测试</title>
	<style type="text/css">
		/*对所有div元素起作用*/
		div{
			width:200px;
			height: 40px;
			background-color: #dddddd;
			padding: 3px;
		}
		/*对id为xx的元素起作用*/
		#xx{
			border:2px dotted black;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div id="xx">id属性值为xx的div元素</div>
	<p id="xx">sdfghjk</p>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
	<title>包含选择器测试</title>
	<style type="text/css">
		/*对所有div元素起作用*/
		div{
			width:350px;
			height: 60px;
			background-color: #dddddd;
			margin: : 5px;
		}
		/*对div中属性为a的元素起作用*/
		div .a{
			width:200px;
			height: 35px;
			border:2px dotted black;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<div>没有任何属性的div元素</div>
	<div><div class="a">处于div之内且class属性为a的元素</div></div>
	<p class="a">没有处于div之内但class属性为a的元素</p>
</body>
</html>

在这里插入图片描述

xiaoxiaojinglinger

关注

0
点赞
踩
0

收藏

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

CSS选择器选择器有基础选择器、层次选择器、伪类选择器、伪元素选择器、属性选择器基础选择器：元素选择器（选择元素名） \ 如：p{color:red;}ID选择器（#号+ID名）\ 如：#csdn{color:black;}类选择器（.+class名） \ 如：.csdn{color:blue;}通配符选择器（选择全部元素，不建议使用）\如：* {color：green}并集选择器/组合选择器（多个不同的标签，应用相同的样式/声明冲突时，需要分开计算）\如：p,h1,span{color:r
复制链接

扫一扫