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>

属性选择器

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

相关推荐
孤水寒月1 小时前
基于HTML的悬窗可拖动记事本
前端·css·html
祝余呀2 小时前
html初学者第一天
前端·html
耶啵奶膘4 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家5 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽6 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头6 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全7 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing7 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆7 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试