CSS选择器

最新推荐文章于 2025-07-30 15:47:02 发布

Code_My_Dream

最新推荐文章于 2025-07-30 15:47:02 发布

阅读量327

点赞数

CC 4.0 BY-SA版权

文章标签： css CSS选择器选择器

本文链接：https://blog.youkuaiyun.com/Code_My_Dream/article/details/62225193

本文详细介绍了CSS中的各类选择器，包括基本选择器如元素选择器、ID选择器、类选择器，以及它们之间的优先级关系；属性选择器的使用方法；伪元素选择器对a标签的不同状态设置样式；最后讲解了层级选择器的应用场景。

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

css选择器
1、基本选择器
(1)元素选择器
语法：html标签名{css属性}

示例：

<div id="div1">hello css1!!!</div>
				<div id="div2">hello css2!!!</div>
				<style type="text/css">
					#div1{background-color: red;}
					#div2{background-color: pink;}
				</style>

(2)id选择器id唯一性
语法：#id的值{css属性}

示例：

<div id="div1">hello css1!!!</div>
				<div id="div2">hello css2!!!</div>
				<style type="text/css">
					#div1{background-color: red;}
					#div2{background-color: pink;}
				</style>

(3)class选择器
语法：.class的值{css属性}
示例：

<div class="style1">div1</div>
				<div class="style1">div2</div>
				<div class="style2">div3</div>
				<style type="text/css">
					.style1{background-color: red}
					.style2{background-color: pink}
				</style>

***选择器的优先级：id>class>元素

2、属性选择器
语法：基本选择器[属性=‘属性值’]{css属性}
示例：

<form action="">
name:<input type="text" /><br/>
pass:<input type="password" /><br/>
</form>
<style type="text/css">
input[type='text']{background-color: yellow}
input[type='password']{background-color: pink}
</style>

3、伪元素选择器
a标签的伪元素选择器
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
示例：

<a href="#">点击我吧</a>
				<style type="text/css">
					a:link{color:blue}
					a:hover{color:red}
					a:active{color:yellow}
					a:visited{color:green}
				</style>

4、层级选择器
语法：父级选择器子级选择器 .....
示例：

	<div id="d1">
				<div class="dd1">
					<span>span1-1</span>
				</div>
				<div class="dd2">
					<span>span1-2</span>
				</div>
			</div>
			<div id="d2">
				<div class="dd1">
					<span>span1-1</span>
				</div>
				<div class="dd2">
					<span>span1-2</span>
				</div>
			</div>
			
			<style type="text/css">
				#d1 .dd2 span{color:red}
			</style>