三种基本选择器
三种基本选择器
标签选择器
同类型标签设置：例如设置h1标签，则所有的h1标签都会被设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签选择器学习</title>
<style>
h1 {
color: #429393;
background: #4949b3;
}
</style>
</head>
<body>
<h1>第一个一级标签</h1>
<h1>第二个一级标签</h1>
<h1>第三个一级标签</h1>
</body>
</html>
类选择器
按照class类别设置，可设置多个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>类选择器学习</title>
<style>
.class1 {
color: yellow;
}
.class2 {
color: #4949b3;
}
</style>
</head>
<body>
<h1 class="class1">第一个一级标签</h1>
<h1 class="class1">第二个一级标签</h1>
<h1 class="class2">第三个一级标签</h1>
</body>
</html>
id选择器
仅能设置唯一的标签，因为id唯一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器学习</title>
<style>
#id1 {
color: #429393;
background: #4949b3;
}
#id2 {
color: #6b9342;
background: #4949b3;
}
#id3 {
color: #9e402f;
background: #4949b3;
}
</style>
</head>
<body>
<h1 id="id1">第一个一级标签</h1>
<h1 id="id2">第二个一级标签</h1>
<h1 id="id3">第三个一级标签</h1>
</body>
</html>
三种选择器的优先级
id选择器>类选择器>标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三种基本标签选择器优先级</title>
<style>
#id1 {
color: blue;
}
h1 {
color: yellow;
}
.class1 {
color: red;
}
</style>
</head>
<body>
<h1 id="id1" class="class1">第一个一级标签</h1>
<h1 class="class1">第二个一级标签</h1>
<h1>第三个一级标签</h1>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY