CSS选择器用于"选中"HTML文档中的元素,然后对其应用样式。选择器是CSS的核心概念之一,掌握各种选择器可以精准控制页面元素的样式。
东巴文（db-w.cn） 认为：选择器是CSS的基础,理解选择器的优先级和使用场景是编写高质量CSS的关键。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素选择器示例</title>
<style>
/* 元素选择器 - 选中所有指定类型的元素 */
/* 选中所有段落 */
p {
color: #333;
line-height: 1.8;
margin-bottom: 15px;
}
/* 选中所有标题 */
h1 {
color: #667eea;
text-align: center;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
border-left: 4px solid #764ba2;
padding-left: 15px;
margin: 20px 0 15px;
}
/* 选中所有链接 */
a {
color: #667eea;
text-decoration: none;
border-bottom: 1px dashed #667eea;
}
a:hover {
color: #764ba2;
border-bottom-color: #764ba2;
}
/* 选中所有列表 */
ul {
background: #f5f5f5;
padding: 20px 20px 20px 40px;
border-radius: 8px;
}
li {
margin-bottom: 8px;
}
/* 选中所有表格 */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<h1>元素选择器示例</h1>
<h2>段落样式</h2>
<p>这是一个段落。元素选择器会选中页面中所有的段落元素,并应用相同的样式。</p>
<p>这是另一个段落。元素选择器是最基础的选择器,权重为 0,0,0,1。</p>
<h2>链接样式</h2>
<p>这是一个包含<a href="#">链接</a>的段落。链接会有特殊的样式。</p>
<h2>列表样式</h2>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<h2>表格样式</h2>
<table>
<thead>
<tr>
<th>选择器</th>
<th>权重</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>元素选择器</td>
<td>0,0,0,1</td>
<td><code>p { }</code></td>
</tr>
<tr>
<td>类选择器</td>
<td>0,0,1,0</td>
<td><code>.class { }</code></td>
</tr>
<tr>
<td>ID选择器</td>
<td>0,1,0,0</td>
<td><code>#id { }</code></td>
</tr>
</tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器示例</title>
<style>
/* 类选择器 - 选中所有具有指定类名的元素 */
/* 基础样式 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
/* 容器类 */
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 文本类 */
.text-center {
text-align: center;
}
.text-primary {
color: #667eea;
}
.text-secondary {
color: #6c757d;
}
.text-success {
color: #28a745;
}
.text-danger {
color: #dc3545;
}
/* 背景类 */
.bg-primary {
background: #667eea;
color: white;
padding: 15px;
border-radius: 5px;
}
.bg-light {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
}
/* 卡片类 */
.card {
background: white;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
transition: box-shadow 0.3s;
}
.card:hover {
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.card-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
color: #333;
}
/* 按钮类 */
.btn {
display: inline-block;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5568d3;
}
.btn-outline {
background: transparent;
border: 2px solid #667eea;
color: #667eea;
}
.btn-outline:hover {
background: #667eea;
color: white;
}
/* 间距类 */
.mt-20 {
margin-top: 20px;
}
.mb-20 {
margin-bottom: 20px;
}
.p-20 {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center text-primary">类选择器示例</h1>
<div class="card mt-20">
<h2 class="card-title">🎨 文本颜色类</h2>
<p class="text-primary">主要文本 - 蓝色</p>
<p class="text-secondary">次要文本 - 灰色</p>
<p class="text-success">成功文本 - 绿色</p>
<p class="text-danger">危险文本 - 红色</p>
</div>
<div class="card">
<h2 class="card-title">🎯 背景类</h2>
<div class="bg-primary mb-20">
主要背景 - 蓝色背景,白色文字
</div>
<div class="bg-light">
浅色背景 - 灰色背景
</div>
</div>
<div class="card">
<h2 class="card-title">🔘 按钮类</h2>
<button class="btn btn-primary">主要按钮</button>
<button class="btn btn-outline">轮廓按钮</button>
</div>
<div class="card">
<h2 class="card-title">💡 类选择器特点</h2>
<ul>
<li>以点号（.）开头</li>
<li>可以在多个元素上复用</li>
<li>一个元素可以有多个类</li>
<li>权重为 0,0,1,0</li>
</ul>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID选择器示例</title>
<style>
/* ID选择器 - 选中具有指定ID的唯一元素 */
/* 基础样式 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
/* ID选择器 - 页面中唯一 */
#header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
text-align: center;
border-radius: 10px;
margin-bottom: 20px;
}
#main-content {
background: white;
padding: 30px;
border-radius: 10px;
margin-bottom: 20px;
}
#sidebar {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 4px solid #667eea;
}
#footer {
background: #333;
color: white;
padding: 20px;
text-align: center;
border-radius: 10px;
}
/* 导航锚点 */
#section1, #section2, #section3 {
padding: 20px;
margin: 20px 0;
border: 1px solid #ddd;
border-radius: 5px;
}
#section1 {
background: #e3f2fd;
}
#section2 {
background: #f3e5f5;
}
#section3 {
background: #e8f5e9;
}
/* 导航样式 */
.nav {
display: flex;
gap: 15px;
justify-content: center;
margin-bottom: 20px;
}
.nav a {
color: #667eea;
text-decoration: none;
padding: 8px 16px;
border: 1px solid #667eea;
border-radius: 5px;
transition: all 0.3s;
}
.nav a:hover {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<!-- ID选择器示例 -->
<header id="header">
<h1>ID选择器示例</h1>
<p>ID选择器用于选中页面中唯一的元素</p>
</header>
<nav class="nav">
<a href="#section1">第一节</a>
<a href="#section2">第二节</a>
<a href="#section3">第三节</a>
</nav>
<main id="main-content">
<section id="section1">
<h2>第一节：ID选择器特点</h2>
<ul>
<li>以井号（#）开头</li>
<li>页面中ID必须唯一</li>
<li>权重为 0,1,0,0</li>
<li>常用于页面主要结构</li>
</ul>
</section>
<section id="section2">
<h2>第二节：ID选择器用途</h2>
<ul>
<li>页面布局结构（header、main、footer）</li>
<li>锚点定位（页面内导航）</li>
<li>JavaScript操作元素</li>
<li>表单元素关联（label的for属性）</li>
</ul>
</section>
<section id="section3">
<h2>第三节：注意事项</h2>
<div id="sidebar">
<h3>⚠️ 重要提示</h3>
<p>ID选择器权重较高,应谨慎使用。优先使用类选择器,ID选择器主要用于页面结构和锚点。</p>
</div>
</section>
</main>
<footer id="footer">
<p>东巴文（db-w.cn） - 让编程学习更有趣！</p>
</footer>
</body>
</html>
东巴文点评：ID选择器权重高,应优先用于页面结构和锚点,避免过度使用导致样式难以覆盖。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器示例</title>
<style>
/* 通配符选择器 - 选中所有元素 */
/* 重置所有元素的默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 注意：通配符选择器权重最低（0,0,0,0） */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 选中所有子元素 */
.box > * {
background: #f8f9fa;
padding: 15px;
margin-bottom: 10px;
border-left: 3px solid #667eea;
}
/* 选中所有段落元素 */
p * {
color: #667eea;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>通配符选择器示例</h1>
<div class="box">
<h2>标题元素</h2>
<p>段落元素,包含<span>内联元素</span>。</p>
<div>div元素</div>
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
</ul>
</div>
<h2>使用场景</h2>
<ul>
<li>CSS Reset（重置默认样式）</li>
<li>选中所有子元素</li>
<li>清除浮动</li>
</ul>
<h2>注意事项</h2>
<p>通配符选择器会选中所有元素,可能影响性能,应谨慎使用。</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器示例</title>
<style>
/* 后代选择器 - 选中某元素的所有后代元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 后代选择器示例 */
/* 选中article内的所有段落 */
article p {
color: #333;
line-height: 1.8;
margin-bottom: 15px;
}
/* 选中nav内的所有链接 */
nav a {
display: inline-block;
padding: 8px 16px;
color: #667eea;
text-decoration: none;
border-radius: 5px;
transition: background 0.3s;
}
nav a:hover {
background: #f0f0f0;
}
/* 选中card内的所有标题 */
.card h2 {
color: #764ba2;
border-bottom: 2px solid #764ba2;
padding-bottom: 10px;
margin-bottom: 15px;
}
/* 选中list内的所有列表项 */
.list li {
padding: 10px 15px;
background: #f8f9fa;
margin-bottom: 5px;
border-radius: 5px;
list-style: none;
}
/* 嵌套后代选择器 */
.content .section .highlight {
background: #fff3cd;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>后代选择器示例</h1>
<nav>
<a href="#">首页</a>
<a href="#">教程</a>
<a href="#">案例</a>
<a href="#">关于</a>
</nav>
<article>
<h2>后代选择器特点</h2>
<p>后代选择器使用空格分隔,选中指定元素内的所有后代元素。</p>
<p>无论后代元素嵌套多深,都会被选中。</p>
<div class="card">
<h2>卡片标题</h2>
<p>这是卡片内的段落。</p>
</div>
</article>
<div class="list">
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
</div>
<div class="content">
<div class="section">
<p>普通段落</p>
<p class="highlight">高亮段落 - 嵌套后代选择器选中</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子元素选择器示例</title>
<style>
/* 子元素选择器 - 只选中直接子元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 子元素选择器示例 */
/* 只选中ul的直接子元素li */
ul > li {
background: #e3f2fd;
padding: 10px 15px;
margin-bottom: 5px;
list-style: none;
border-left: 3px solid #2196f3;
}
/* 嵌套的li不会被选中 */
ul > li > ul > li {
background: #f3e5f5;
border-left-color: #9c27b0;
}
/* 只选中article的直接子元素h2 */
article > h2 {
color: #764ba2;
border-bottom: 2px solid #764ba2;
padding-bottom: 10px;
}
/* 只选中card的直接子元素 */
.card > p {
color: #666;
line-height: 1.8;
}
/* 嵌套的p不会被选中 */
.card > div > p {
color: #999;
font-style: italic;
}
/* 对比：后代选择器 */
.box p {
background: #fff3cd;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>子元素选择器示例</h1>
<h2>列表示例</h2>
<ul>
<li>一级列表项 1</li>
<li>
一级列表项 2
<ul>
<li>二级列表项 1</li>
<li>二级列表项 2</li>
</ul>
</li>
<li>一级列表项 3</li>
</ul>
<article>
<h2>文章标题（直接子元素）</h2>
<div class="card">
<p>卡片的直接子段落</p>
<div>
<p>嵌套的段落（不是直接子元素）</p>
</div>
</div>
</article>
<h2>对比示例</h2>
<div class="box">
<p>直接子段落</p>
<div>
<p>嵌套的段落（后代选择器会选中）</p>
</div>
</div>
<table border="1" style="margin-top: 20px; border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background: #667eea; color: white;">选择器</th>
<th style="padding: 10px; background: #667eea; color: white;">符号</th>
<th style="padding: 10px; background: #667eea; color: white;">选中范围</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">后代选择器</td>
<td style="padding: 10px;">空格</td>
<td style="padding: 10px;">所有后代元素</td>
</tr>
<tr>
<td style="padding: 10px;">子元素选择器</td>
<td style="padding: 10px;">></td>
<td style="padding: 10px;">直接子元素</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相邻兄弟选择器示例</title>
<style>
/* 相邻兄弟选择器 - 选中紧邻的下一个兄弟元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 相邻兄弟选择器示例 */
/* 选中h2紧邻的下一个p元素 */
h2 + p {
background: #e3f2fd;
padding: 15px;
border-left: 4px solid #2196f3;
font-weight: bold;
}
/* 选中h3紧邻的下一个p元素 */
h3 + p {
color: #764ba2;
font-style: italic;
}
/* 选中输入框紧邻的下一个span（用于表单验证提示） */
input + span {
display: block;
color: #dc3545;
font-size: 12px;
margin-top: 5px;
}
/* 选中复选框紧邻的下一个label */
input[type="checkbox"] + label {
margin-left: 8px;
cursor: pointer;
}
/* 选中按钮紧邻的下一个按钮 */
button + button {
margin-left: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1>相邻兄弟选择器示例</h1>
<h2>第一节</h2>
<p>这是h2紧邻的段落,会被特殊样式选中。</p>
<p>这是第二个段落,不会被选中。</p>
<h3>小节标题</h3>
<p>这是h3紧邻的段落,会有紫色斜体样式。</p>
<p>这是第二个段落,不会被选中。</p>
<h2>表单示例</h2>
<form>
<div style="margin-bottom: 15px;">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名">
<span>用户名不能为空</span>
</div>
<div style="margin-bottom: 15px;">
<label>邮箱：</label>
<input type="email" placeholder="请输入邮箱">
<span>邮箱格式不正确</span>
</div>
<div style="margin-bottom: 15px;">
<input type="checkbox" id="agree">
<label for="agree">我同意用户协议</label>
</div>
<button type="button">提交</button>
<button type="button">取消</button>
</form>
<table border="1" style="margin-top: 20px; border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background: #667eea; color: white;">选择器</th>
<th style="padding: 10px; background: #667eea; color: white;">符号</th>
<th style="padding: 10px; background: #667eea; color: white;">选中范围</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">相邻兄弟选择器</td>
<td style="padding: 10px;">+</td>
<td style="padding: 10px;">紧邻的下一个兄弟元素</td>
</tr>
<tr>
<td style="padding: 10px;">通用兄弟选择器</td>
<td style="padding: 10px;">~</td>
<td style="padding: 10px;">后面所有兄弟元素</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通用兄弟选择器示例</title>
<style>
/* 通用兄弟选择器 - 选中后面所有的兄弟元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 通用兄弟选择器示例 */
/* 选中h2后面的所有p兄弟元素 */
h2 ~ p {
background: #f8f9fa;
padding: 10px 15px;
border-left: 3px solid #667eea;
margin-bottom: 10px;
}
/* 选中.active后面的所有li兄弟元素 */
.active ~ li {
opacity: 0.6;
}
/* 选中input后面的所有label兄弟元素 */
input ~ label {
color: #667eea;
font-weight: bold;
}
/* 对比示例 */
.box p {
background: white;
padding: 10px;
margin: 5px 0;
}
.highlight ~ p {
background: #fff3cd;
}
</style>
</head>
<body>
<div class="container">
<h1>通用兄弟选择器示例</h1>
<h2>段落示例</h2>
<p>段落 1 - h2后面的所有p都会被选中</p>
<p>段落 2 - 被选中</p>
<div>这是一个div,不会被选中</div>
<p>段落 3 - 被选中</p>
<p>段落 4 - 被选中</p>
<h2>列表示例</h2>
<ul style="list-style: none; padding: 0;">
<li style="padding: 10px; background: #e3f2fd; margin-bottom: 5px;">列表项 1</li>
<li class="active" style="padding: 10px; background: #4caf50; color: white; margin-bottom: 5px;">列表项 2（active）</li>
<li style="padding: 10px; background: #e3f2fd; margin-bottom: 5px;">列表项 3 - 透明度降低</li>
<li style="padding: 10px; background: #e3f2fd; margin-bottom: 5px;">列表项 4 - 透明度降低</li>
<li style="padding: 10px; background: #e3f2fd; margin-bottom: 5px;">列表项 5 - 透明度降低</li>
</ul>
<h2>对比示例</h2>
<div class="box">
<p>段落 1</p>
<p class="highlight">段落 2（highlight）</p>
<p>段落 3 - 被选中</p>
<p>段落 4 - 被选中</p>
<p>段落 5 - 被选中</p>
</div>
<table border="1" style="margin-top: 20px; border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background: #667eea; color: white;">选择器</th>
<th style="padding: 10px; background: #667eea; color: white;">符号</th>
<th style="padding: 10px; background: #667eea; color: white;">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;">相邻兄弟选择器</td>
<td style="padding: 10px;">+</td>
<td style="padding: 10px;">只选中紧邻的下一个兄弟元素</td>
</tr>
<tr>
<td style="padding: 10px;">通用兄弟选择器</td>
<td style="padding: 10px;">~</td>
<td style="padding: 10px;">选中后面所有的兄弟元素</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性选择器示例</title>
<style>
/* 属性选择器 - 根据元素的属性及属性值选中元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 属性选择器示例 */
/* 选中具有title属性的所有元素 */
[title] {
border-bottom: 2px dotted #667eea;
cursor: help;
}
/* 选中具有href属性的a元素 */
a[href] {
color: #667eea;
text-decoration: none;
}
/* 选中href属性值为指定值的a元素 */
a[href="https://db-w.cn"] {
color: #764ba2;
font-weight: bold;
}
/* 选中href属性值包含指定单词的a元素 */
a[href~="example"] {
background: #e3f2fd;
padding: 2px 5px;
}
/* 选中href属性值以指定值开头的a元素 */
a[href^="https"] {
padding-left: 20px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23667eea" d="M18 13h-6v6h-2v-6H4v-2h6V5h2v6h6v2z"/></svg>') no-repeat left center;
}
/* 选中href属性值以指定值结尾的a元素 */
a[href$=".pdf"] {
padding-left: 20px;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="%23dc3545" d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z"/></svg>') no-repeat left center;
}
/* 选中href属性值包含指定子字符串的a元素 */
a[href*="google"] {
color: #4caf50;
}
/* 选中class属性值以指定值开头（后跟连字符）的元素 */
[class|="btn"] {
display: inline-block;
padding: 10px 20px;
border-radius: 5px;
margin: 5px;
}
/* 选中type属性为text的input元素 */
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
margin-bottom: 10px;
}
/* 选中disabled属性存在的input元素 */
input[disabled] {
background: #f5f5f5;
cursor: not-allowed;
}
/* 选中checked属性存在的input元素 */
input[type="checkbox"]:checked {
accent-color: #667eea;
}
</style>
</head>
<body>
<div class="container">
<h1>属性选择器示例</h1>
<h2>链接示例</h2>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 10px;">
<a href="https://db-w.cn" title="东巴文官网">东巴文官网</a>
</li>
<li style="margin-bottom: 10px;">
<a href="https://example.com">Example网站</a>
</li>
<li style="margin-bottom: 10px;">
<a href="https://www.google.com">Google</a>
</li>
<li style="margin-bottom: 10px;">
<a href="document.pdf">PDF文档</a>
</li>
</ul>
<h2>按钮示例</h2>
<button class="btn-primary">主要按钮</button>
<button class="btn-secondary">次要按钮</button>
<button class="btn-outline">轮廓按钮</button>
<h2>表单示例</h2>
<form>
<input type="text" placeholder="普通输入框">
<input type="text" placeholder="禁用输入框" disabled>
<div style="margin-top: 10px;">
<input type="checkbox" id="check1" checked>
<label for="check1">已选中</label>
</div>
<div style="margin-top: 5px;">
<input type="checkbox" id="check2">
<label for="check2">未选中</label>
</div>
</form>
<h2>属性选择器语法表</h2>
<table border="1" style="margin-top: 20px; border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background: #667eea; color: white;">语法</th>
<th style="padding: 10px; background: #667eea; color: white;">说明</th>
<th style="padding: 10px; background: #667eea; color: white;">示例</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding: 10px;"><code>[attr]</code></td>
<td style="padding: 10px;">选中具有指定属性的元素</td>
<td style="padding: 10px;"><code>[title]</code></td>
</tr>
<tr>
<td style="padding: 10px;"><code>[attr="value"]</code></td>
<td style="padding: 10px;">选中属性值完全匹配的元素</td>
<td style="padding: 10px;"><code>[type="text"]</code></td>
</tr>
<tr>
<td style="padding: 10px;"><code>[attr~="value"]</code></td>
<td style="padding: 10px;">选中属性值包含指定单词的元素</td>
<td style="padding: 10px;"><code>[class~="btn"]</code></td>
</tr>
<tr>
<td style="padding: 10px;"><code>[attr^="value"]</code></td>
<td style="padding: 10px;">选中属性值以指定值开头的元素</td>
<td style="padding: 10px;"><code>[href^="https"]</code></td>
</tr>
<tr>
<td style="padding: 10px;"><code>[attr$="value"]</code></td>
<td style="padding: 10px;">选中属性值以指定值结尾的元素</td>
<td style="padding: 10px;"><code>[href$=".pdf"]</code></td>
</tr>
<tr>
<td style="padding: 10px;"><code>[attr*="value"]</code></td>
<td style="padding: 10px;">选中属性值包含指定子字符串的元素</td>
<td style="padding: 10px;"><code>[href*="google"]</code></td>
</tr>
<tr>
<td style="padding: 10px;"><code>[attr|="value"]</code></td>
<td style="padding: 10px;">选中属性值等于value或以value-开头的元素</td>
<td style="padding: 10px;"><code>[class|="btn"]</code></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器示例</title>
<style>
/* 结构伪类选择器 - 根据元素在文档树中的位置选中元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 结构伪类示例 */
/* :first-child - 选中第一个子元素 */
ul li:first-child {
background: #e3f2fd;
border-left: 4px solid #2196f3;
}
/* :last-child - 选中最后一个子元素 */
ul li:last-child {
background: #f3e5f5;
border-left: 4px solid #9c27b0;
}
/* :nth-child(n) - 选中第n个子元素 */
ol li:nth-child(3) {
background: #fff3cd;
border-left: 4px solid #ffc107;
}
/* :nth-child(odd) - 选中奇数位置的子元素 */
table tr:nth-child(odd) {
background: #f8f9fa;
}
/* :nth-child(even) - 选中偶数位置的子元素 */
table tr:nth-child(even) {
background: white;
}
/* :nth-child(3n) - 选中3的倍数位置的子元素 */
.grid div:nth-child(3n) {
background: #e8f5e9;
}
/* :nth-of-type(n) - 选中同类型元素中的第n个 */
.content p:nth-of-type(2) {
color: #764ba2;
font-weight: bold;
}
/* :first-of-type - 选中同类型元素中的第一个 */
.content h2:first-of-type {
color: #667eea;
}
/* :last-of-type - 选中同类型元素中的最后一个 */
.content p:last-of-type {
font-style: italic;
color: #666;
}
/* :only-child - 选中唯一的子元素 */
.box p:only-child {
background: #ffebee;
padding: 10px;
border-radius: 5px;
}
/* :empty - 选中没有子元素的元素 */
div:empty {
background: #f5f5f5;
height: 20px;
margin: 10px 0;
border: 1px dashed #ddd;
}
/* 通用样式 */
ul, ol {
list-style: none;
padding: 0;
}
li {
padding: 10px 15px;
margin-bottom: 5px;
background: #f8f9fa;
border-radius: 5px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 20px 0;
}
.grid div {
padding: 20px;
background: #f8f9fa;
text-align: center;
border-radius: 5px;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
th, td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>结构伪类选择器示例</h1>
<h2>:first-child 和 :last-child</h2>
<ul>
<li>第一个子元素 - :first-child</li>
<li>第二个子元素</li>
<li>第三个子元素</li>
<li>最后一个子元素 - :last-child</li>
</ul>
<h2>:nth-child(n)</h2>
<ol>
<li>第 1 个子元素</li>
<li>第 2 个子元素</li>
<li>第 3 个子元素 - :nth-child(3)</li>
<li>第 4 个子元素</li>
<li>第 5 个子元素</li>
</ol>
<h2>:nth-child(odd) 和 :nth-child(even)</h2>
<table>
<thead>
<tr>
<th>序号</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>奇数行</td></tr>
<tr><td>2</td><td>偶数行</td></tr>
<tr><td>3</td><td>奇数行</td></tr>
<tr><td>4</td><td>偶数行</td></tr>
<tr><td>5</td><td>奇数行</td></tr>
</tbody>
</table>
<h2>:nth-child(3n)</h2>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3 - 3的倍数</div>
<div>4</div>
<div>5</div>
<div>6 - 3的倍数</div>
<div>7</div>
<div>8</div>
<div>9 - 3的倍数</div>
</div>
<h2>:nth-of-type(n)</h2>
<div class="content">
<h2>第一个h2标题</h2>
<p>第一个段落</p>
<h2>第二个h2标题</h2>
<p>第二个段落 - :nth-of-type(2)</p>
<p>第三个段落 - :last-of-type</p>
</div>
<h2>:only-child</h2>
<div class="box">
<p>我是唯一的子元素 - :only-child</p>
</div>
<h2>:empty</h2>
<div>有内容的div</div>
<div></div><!-- 空div - :empty -->
<div>有内容的div</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>状态伪类选择器示例</title>
<style>
/* 状态伪类选择器 - 根据元素的动态状态选中元素 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* 链接状态 */
/* :link - 未访问的链接 */
a:link {
color: #667eea;
text-decoration: none;
}
/* :visited - 已访问的链接 */
a:visited {
color: #9c27b0;
}
/* :hover - 鼠标悬停 */
a:hover {
color: #764ba2;
text-decoration: underline;
}
/* :active - 激活状态（点击时） */
a:active {
color: #dc3545;
}
/* 按钮状态 */
button {
padding: 12px 24px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin: 5px;
transition: all 0.3s;
}
.btn-primary {
background: #667eea;
color: white;
}
.btn-primary:hover {
background: #5568d3;
transform: translateY(-2px);
}
.btn-primary:active {
transform: translateY(0);
}
/* 表单状态 */
/* :focus - 获得焦点 */
input:focus, textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
/* :focus-within - 子元素获得焦点 */
.form-group:focus-within {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
}
/* :disabled - 禁用状态 */
input:disabled, button:disabled {
background: #f5f5f5;
color: #999;
cursor: not-allowed;
}
/* :enabled - 启用状态 */
input:enabled {
border: 1px solid #ddd;
padding: 10px;
border-radius: 5px;
width: 100%;
margin-bottom: 10px;
}
/* :checked - 选中状态 */
input[type="checkbox"]:checked {
accent-color: #667eea;
}
/* :required - 必填字段 */
input:required {
border-left: 3px solid #dc3545;
}
/* :optional - 可选字段 */
input:optional {
border-left: 3px solid #28a745;
}
/* :valid - 验证通过 */
input:valid {
border-color: #28a745;
}
/* :invalid - 验证失败 */
input:invalid {
border-color: #dc3545;
}
/* :read-only - 只读 */
input:read-only {
background: #f8f9fa;
color: #666;
}
/* :placeholder-shown - 显示占位符 */
input:placeholder-shown {
background: #fff9c4;
}
</style>
</head>
<body>
<div class="container">
<h1>状态伪类选择器示例</h1>
<h2>链接状态</h2>
<p>
<a href="https://db-w.cn">东巴文官网</a> |
<a href="https://example.com">Example网站</a>
</p>
<h2>按钮状态</h2>
<button class="btn-primary">主要按钮</button>
<button class="btn-primary" disabled>禁用按钮</button>
<h2>表单状态</h2>
<form>
<div class="form-group">
<label>用户名（必填）：</label>
<input type="text" placeholder="请输入用户名" required>
</div>
<div class="form-group">
<label>邮箱（必填）：</label>
<input type="email" placeholder="请输入邮箱" required>
</div>
<div class="form-group">
<label>昵称（可选）：</label>
<input type="text" placeholder="请输入昵称">
</div>
<div class="form-group">
<label>只读字段：</label>
<input type="text" value="只读内容" readonly>
</div>
<div class="form-group">
<label>禁用字段：</label>
<input type="text" value="禁用内容" disabled>
</div>
<div class="form-group">
<label>备注：</label>
<textarea placeholder="请输入备注" rows="3" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px;"></textarea>
</div>
<div class="form-group">
<input type="checkbox" id="agree">
<label for="agree">我同意用户协议</label>
</div>
</form>
<h2>状态伪类说明表</h2>
<table border="1" style="margin-top: 20px; border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background: #667eea; color: white;">伪类</th>
<th style="padding: 10px; background: #667eea; color: white;">说明</th>
</tr>
</thead>
<tbody>
<tr><td style="padding: 10px;">:link</td><td style="padding: 10px;">未访问的链接</td></tr>
<tr><td style="padding: 10px;">:visited</td><td style="padding: 10px;">已访问的链接</td></tr>
<tr><td style="padding: 10px;">:hover</td><td style="padding: 10px;">鼠标悬停</td></tr>
<tr><td style="padding: 10px;">:active</td><td style="padding: 10px;">激活状态</td></tr>
<tr><td style="padding: 10px;">:focus</td><td style="padding: 10px;">获得焦点</td></tr>
<tr><td style="padding: 10px;">:disabled</td><td style="padding: 10px;">禁用状态</td></tr>
<tr><td style="padding: 10px;">:checked</td><td style="padding: 10px;">选中状态</td></tr>
<tr><td style="padding: 10px;">:valid</td><td style="padding: 10px;">验证通过</td></tr>
<tr><td style="padding: 10px;">:invalid</td><td style="padding: 10px;">验证失败</td></tr>
</tbody>
</table>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器示例</title>
<style>
/* 伪元素选择器 - 创建虚拟元素并设置样式 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
/* ::before - 在元素内容前插入内容 */
.quote::before {
content: '"';
font-size: 40px;
color: #667eea;
line-height: 0;
vertical-align: -0.5em;
margin-right: 5px;
}
/* ::after - 在元素内容后插入内容 */
.quote::after {
content: '"';
font-size: 40px;
color: #667eea;
line-height: 0;
vertical-align: -0.5em;
margin-left: 5px;
}
/* 清除浮动 */
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* ::first-letter - 首字母样式 */
.drop-cap::first-letter {
float: left;
font-size: 48px;
line-height: 1;
margin-right: 10px;
color: #667eea;
font-weight: bold;
}
/* ::first-line - 首行样式 */
.first-line::first-line {
font-weight: bold;
color: #764ba2;
}
/* ::selection - 选中文本样式 */
::selection {
background: #667eea;
color: white;
}
/* 装饰性元素 */
.card {
position: relative;
background: white;
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
}
.card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 10px;
z-index: -1;
opacity: 0;
transition: opacity 0.3s;
}
.card:hover::before {
opacity: 1;
}
/* 列表装饰 */
.custom-list li {
position: relative;
padding-left: 25px;
margin-bottom: 10px;
}
.custom-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #28a745;
font-weight: bold;
}
/* 工具提示 */
.tooltip {
position: relative;
cursor: help;
border-bottom: 1px dotted #667eea;
}
.tooltip::after {
content: attr(data-tip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 12px;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
/* 引用样式 */
blockquote {
position: relative;
padding: 20px 20px 20px 50px;
background: #f8f9fa;
border-radius: 8px;
margin: 20px 0;
}
blockquote::before {
content: '"';
position: absolute;
left: 15px;
top: 10px;
font-size: 60px;
color: #667eea;
line-height: 1;
}
</style>
</head>
<body>
<div class="container">
<h1>伪元素选择器示例</h1>
<h2>::before 和 ::after</h2>
<p class="quote">这是一段引用文字,前后会自动添加引号。</p>
<div class="card">
<h3>装饰性边框</h3>
<p>鼠标悬停时显示渐变边框效果。</p>
</div>
<h2>::first-letter</h2>
<p class="drop-cap">
这是一段文字,首字母会被放大并设置特殊样式。
这种效果常用于文章开头,增加视觉吸引力。
</p>
<h2>::first-line</h2>
<p class="first-line">
这是第一行文字,会加粗并显示紫色。<br>
这是第二行文字,保持普通样式。
</p>
<h2>自定义列表</h2>
<ul class="custom-list">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<h2>工具提示</h2>
<p>
将鼠标悬停在<span class="tooltip" data-tip="这是一个工具提示">这段文字</span>上查看提示。
</p>
<h2>引用样式</h2>
<blockquote>
<p>学习是一种态度,坚持是一种品质。</p>
<footer>—— 东巴文</footer>
</blockquote>
<h2>伪元素说明表</h2>
<table border="1" style="margin-top: 20px; border-collapse: collapse; width: 100%;">
<thead>
<tr>
<th style="padding: 10px; background: #667eea; color: white;">伪元素</th>
<th style="padding: 10px; background: #667eea; color: white;">说明</th>
</tr>
</thead>
<tbody>
<tr><td style="padding: 10px;">::before</td><td style="padding: 10px;">在元素内容前插入内容</td></tr>
<tr><td style="padding: 10px;">::after</td><td style="padding: 10px;">在元素内容后插入内容</td></tr>
<tr><td style="padding: 10px;">::first-letter</td><td style="padding: 10px;">选中首字母</td></tr>
<tr><td style="padding: 10px;">::first-line</td><td style="padding: 10px;">选中首行</td></tr>
<tr><td style="padding: 10px;">::selection</td><td style="padding: 10px;">选中文本样式</td></tr>
</tbody>
</table>
</div>
</body>
</html>
东巴文点评：伪元素使用双冒号（::）语法,与伪类（单冒号:）区分。伪元素可以创建虚拟元素,用于装饰和布局。
/* 不推荐：使用通配符和深层嵌套 */
* {
margin: 0;
}
body div ul li a span {
color: red;
}
/* 推荐：使用具体的类选择器 */
.reset {
margin: 0;
}
.nav-link-text {
color: red;
}
/* 推荐：使用BEM命名规范 */
.card {}
.card__title {}
.card__content {}
.card--featured {}
/* 不推荐：过度嵌套 */
.header .nav .menu .item .link {
color: blue;
}
/* 推荐：扁平化选择器 */
.nav-link {
color: blue;
}
问题1：以下选择器的权重从高到低排序正确的是？
A. #id > .class > element > *
B. .class > #id > element > *
C. #id > element > .class > *
D. element > #id > .class > *
答案：A
东巴文解释：选择器权重从高到低：ID选择器（0,1,0,0）> 类选择器（0,0,1,0）> 元素选择器（0,0,0,1）> 通配符选择器（0,0,0,0）。
</details>问题2：以下哪个选择器可以选中所有偶数行的表格行？
A. tr:nth-child(odd)
B. tr:nth-child(even)
C. tr:nth-of-type(odd)
D. tr:nth-of-type(2n+1)
答案：B
东巴文解释：:nth-child(even)选中偶数位置的子元素,:nth-child(odd)选中奇数位置的子元素。
任务：创建一个使用各种选择器的产品列表页面,包含不同状态的卡片和交互效果。
<details> <summary>点击查看参考答案</summary><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品列表 - 东巴文</title>
<style>
/* CSS变量 */
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--success-color: #28a745;
--danger-color: #dc3545;
--text-color: #333;
--text-light: #666;
--bg-color: #f5f5f5;
}
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: var(--bg-color);
color: var(--text-color);
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
color: var(--primary-color);
margin-bottom: 30px;
}
/* 产品网格 */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
/* 产品卡片 */
.product-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
/* 产品图片 */
.product-image {
width: 100%;
height: 200px;
object-fit: cover;
}
/* 产品信息 */
.product-info {
padding: 20px;
}
.product-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
color: var(--text-color);
}
.product-price {
font-size: 24px;
color: var(--danger-color);
font-weight: bold;
margin-bottom: 10px;
}
.product-price::before {
content: '¥';
font-size: 16px;
}
.product-desc {
color: var(--text-light);
font-size: 14px;
line-height: 1.6;
margin-bottom: 15px;
}
/* 产品标签 */
.product-tag {
display: inline-block;
padding: 4px 8px;
background: var(--primary-color);
color: white;
font-size: 12px;
border-radius: 3px;
margin-right: 5px;
}
/* 特殊状态 */
/* 第一个卡片 */
.product-card:first-child {
border: 2px solid var(--primary-color);
}
/* 第一个卡片的标题 */
.product-card:first-child .product-title::after {
content: ' 🔥';
}
/* 偶数卡片 */
.product-card:nth-child(even) {
background: #fafafa;
}
/* 最后一个卡片 */
.product-card:last-child {
margin-bottom: 0;
}
/* 售罄状态 */
.product-card.sold-out {
opacity: 0.6;
pointer-events: none;
}
.product-card.sold-out::after {
content: '已售罄';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-15deg);
background: rgba(220, 53, 69, 0.9);
color: white;
padding: 10px 30px;
font-size: 20px;
font-weight: bold;
border-radius: 5px;
}
/* 新品标签 */
.product-card.new .product-title::before {
content: '【新品】';
color: var(--success-color);
margin-right: 5px;
}
/* 热销标签 */
.product-card.hot .product-title::before {
content: '【热销】';
color: var(--danger-color);
margin-right: 5px;
}
/* 按钮 */
.btn {
display: block;
width: 100