CSS选择器

最新推荐文章于 2025-12-05 07:37:55 发布

原创最新推荐文章于 2025-12-05 07:37:55 发布 · 355 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #CSS选择器 #选择器

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

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>