css里面的六种选择器

css中的六种选择器:标签选择器、id选择器、类选择器、组合选择器、层次选择器、伪类选择器。

<head>
	<meta charset="UTF-8">
	<title>六种选择器</title>
	<style type="text/css">
		/*标签选择器*/
		
		p {
			color: red;
			font-size: 39.333px;
		}
		/*类选择器*/
		
		.box {
			color: pink;
		}
		/*id选择器*/
		
		#div {
			color: yellow;
		}
		/*层级选择器*/
		
		.box span {
			font-style: italic;
		}
		/*组选择器*/
		
		.box,
		.second_box {
			font-size: 40px;
			color: rgb(12 345 6);
		}
		/*伪类选择器*/
		
		.pretend:hover {
			color: rgb(30%, 70%, 40%);
			font: normal, 60px/40px, "楷体";
			text-decoration: none;
			font-style: italic;
		}
	</style>
</head>

<body>
	<div id="div">这是id选择器</div>
	<p>这是标签选择器</p>
	<div class="second_box">组选择器</div>
	<div class="box">这是类选择器
		<br<span>层级选择器</span>
	</div>
	<a href="http://www.baidu.com" class="pretend">这是伪类选择器<br />dfghjk</a>
</body>

总结:选择器之间可以相互嵌套使用,所以在运用过程中,不要一味地 选择某个选择器一用到底,要学会灵活使用六种选择器之间的嵌套。

猜你喜欢

转载自blog.csdn.net/qq_43552952/article/details/85164056