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>

属性选择器

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

相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam5 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript