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>

属性选择器

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

相关推荐
vim怎么退出1 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的1 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解4 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵7 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im7 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man8 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下23 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
小磊哥er1 小时前
【前端工程化】前端工作中的业务规范有哪些
前端
ᥬ 小月亮1 小时前
webpack基础
前端·webpack