CSS选择器 - 技术栈

CSS 选择器

基本选择器

基本选择器通配符选择器元素选择器类选择器 id选择器后代选择器

通配符选择器

html 复制代码

<style type="text/css">
	*{
		margin:0;
		padding:0
	}
</style>

id选择器

id选择器，是标签中属性id的属性值，要求id值唯一

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			#idName{
				margin:0;
				padding:0
			}
			
		</style>
	</head>
	<body>
		<div id="idName">
			
		</div>
	</body>
</html>

类选择器

html 复制代码

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			.className{
				margin:0;
				padding:0
			}
			
		</style>
	</head>
	<body>
		<div class="className">
			
		</div>
	</body>
</html>

元素选择器

html 复制代码

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				margin:0;
				padding:0
			}
			
		</style>
	</head>
	<body>
		<div >
			
		</div>
	</body>
</html>

后代选择器

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
			
			
			.className div{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="className">
			<div>222</div>
		</div>
	</body>
</html>

基本选择器扩展

基本选择器扩展子元素选择器相邻兄弟选择器通用兄弟选择器选择器分组

子元素选择器

也可称为直接后代选择器，此类选择器只能匹配到直接后代，不能匹配到深层次的后代元素

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
		
			.className > .second{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="className">
			<div class="second">
				<div>111</div>
			</div>
		</div>
		
	</body>
</html>

相邻兄弟选择器

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
		
			.className,.second{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="className">
			<div>222</div>
		</div>
		<div class="second">
			<div>111</div>
		</div>
	</body>
</html>

通用兄弟选择器

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
		
			.className,.second{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="className">
			<div>222</div>
		</div>
		<div class="second">
			<div>111</div>
		</div>
	</body>
</html>

选择器分组

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			
		
			.className,.second{
				color: red;
			}
			
		</style>
	</head>
	<body>
		<div class="className">
			<div>222</div>
		</div>
		<div class="second">
			<div>111</div>
		</div>
	</body>
</html>

属性选择器

属性选择器存在和值属性选择器子串值属性选择器通用兄弟选择器选择器分组