不是吧，CodeBuddy教我CSS选择器
原创
不是吧，CodeBuddy教我CSS选择器
原创
半月无霜
修改于 2025-06-05 18:28:02
修改于 2025-06-05 18:28:02
代码可运行
运行总次数：0
代码可运行
一、前言
这段时间，在处理一些前端的东西，但由于毕业之后就没有再接触过前端的项目了，导致前端的知识点早已经抛到九天之外了。尤其是CSS兄弟选择器，以及伪类选择器，我几乎已经忘光了。
那我在想，CodeBuddy，是不是可以帮助我重新拾起这段前端知识呢？
说干就干，我打开CodeBuddy，输入下面的内容，然后点击运行按钮。
我需要学习css兄弟选择器，以及伪类选择器的用法，请帮我生成一个学习的html文件，以便我调试学习这两个选择器的使用
image-20250605181441287
很快啊，这个代码文件就已经生成了，下面我们就一起来看看
二、教学文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS选择器学习演示</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h2 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 5px;
}
.example {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
padding: 15px;
margin-bottom: 20px;
}
.example-title {
font-weight: bold;
margin-bottom: 10px;
color: #2980b9;
}
/* 兄弟选择器示例样式 */
.sibling-base {
padding: 10px;
margin: 5px;
background-color: #e74c3c;
color: white;
}
/* 相邻兄弟选择器(+) - 只选择紧跟在后面的一个兄弟元素 */
.sibling-base + div {
background-color: #3498db;
}
/* 通用兄弟选择器(~) - 选择后面所有的兄弟元素 */
.sibling-base ~ p {
background-color: #2ecc71;
padding: 8px;
}
/* 伪类选择器示例样式 */
.pseudo-list {
list-style: none;
padding: 0;
}
.pseudo-list li {
padding: 8px;
margin: 5px 0;
background-color: #ecf0f1;
transition: background-color 0.3s;
}
/* :hover伪类 - 鼠标悬停时改变样式 */
.pseudo-list li:hover {
background-color: #9b59b6 !important;
color: white;
}
/* :first-child伪类 - 选择第一个子元素 */
.pseudo-list li:first-child {
background-color: #e67e22;
color: white;
}
/* :nth-child()伪类 - 选择特定位置的子元素 */
.pseudo-list li:nth-child(2n) {
background-color: #1abc9c;
color: white;
}
/* :not()伪类 - 选择不匹配的元素 */
.pseudo-list li:not(.special) {
border-left: 4px solid #34495e;
}
</style>
</head>
<body>
<h1>CSS选择器学习演示</h1>
<div class="example">
<div class="example-title">1. 兄弟选择器</div>
<p>兄弟选择器用于选择有相同父元素的元素。</p>
<h3>相邻兄弟选择器 (+)</h3>
<p>选择紧接在另一个元素后的元素，且二者有相同的父元素。</p>
<div class="sibling-base">这是基础元素 (.sibling-base)</div>
<div>这个div紧跟在.sibling-base后面，会被.sibling-base + div选择器选中</div>
<p>这个p元素不会被相邻兄弟选择器选中，因为它不是紧跟在后面的div</p>
<h3>通用兄弟选择器 (~)</h3>
<p>选择所有在另一个元素后的同级元素。</p>
<div class="sibling-base">这是另一个基础元素 (.sibling-base)</div>
<p>这个p元素会被.sibling-base ~ p选择器选中</p>
<div>这个div不会被选中，因为选择器只针对p元素</div>
<p>这个p元素也会被选中</p>
</div>
<div class="example">
<div class="example-title">2. 伪类选择器</div>
<p>伪类选择器用于选择元素的特定状态。</p>
<h3>:hover 伪类</h3>
<p>鼠标悬停在元素上时应用样式：</p>
<ul class="pseudo-list">
<li>将鼠标悬停在这些列表项上</li>
<li>看看:hover效果</li>
<li>背景色会改变</li>
</ul>
<h3>:first-child 伪类</h3>
<p>选择父元素的第一个子元素：</p>
<ul class="pseudo-list">
<li>第一个列表项有特殊样式</li>
<li>普通列表项</li>
<li>普通列表项</li>
</ul>
<h3>:nth-child() 伪类</h3>
<p>选择父元素的第n个子元素（本例中选中偶数项）：</p>
<ul class="pseudo-list">
<li>第1项</li>
<li>第2项（偶数）</li>
<li>第3项</li>
<li>第4项（偶数）</li>
<li>第5项</li>
</ul>
<h3>:not() 伪类</h3>
<p>选择不匹配选择器的元素（本例中不选中.special类）：</p>
<ul class="pseudo-list">
<li>普通项 - 有左边框</li>
<li class="special">特殊项 - 没有左边框</li>
<li>普通项 - 有左边框</li>
</ul>
</div>
<div class="example">
<div class="example-title">调试说明</div>
<p>1. 打开浏览器开发者工具（F12），查看元素和样式面板</p>
<p>2. 尝试修改CSS中的选择器，观察页面变化</p>
<p>3. 添加新的元素测试不同的选择器组合</p>
</div>
</body>
</html>当然，只看代码也不是很直观，但这是一个html文件，一个简单的教学项目，是可以运行的
直接打开浏览器，去查看，去体验CSS兄弟选择器，以及伪类选择器
三、总结
当然，在体验完成之后，总得要进行总结吧
不过总结这个事情，也不用我来进行，直接交给CodeBuddy
下面这段总结，就是由CodeBuddy进行生成的
CSS选择器总结
兄弟选择器
- 相邻兄弟选择器 (
A + B)- 选择紧跟在A后面的第一个B元素
- 示例：
h2 + p选择紧接在h2后的段落
- 通用兄弟选择器 (
A ~ B)- 选择A元素之后的所有同级B元素
- 示例：
h2 ~ p选择h2后面的所有段落
伪类选择器
- 状态伪类
:hover- 鼠标悬停状态:active- 元素被激活时:focus- 获得焦点时
- 结构伪类
:first-child- 父元素的第一个子元素:nth-child(n)- 父元素的第n个子元素:not(selector)- 不匹配选择器的元素
- 表单伪类
:checked- 选中的表单元素:disabled- 禁用的表单元素
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
