freeCodeCamp 基础 CSS 挑战实战用 CSS 属性选择器Attribute Selectors精准定位与样式化元素【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp本文围绕 freeCodeCamp 响应式设计课程中 basic-css 模块的挑战 Use Attribute Selectors to Style Elementsid58c383d33e2e3259241f3076展开完整还原该挑战的起始代码CatPhotoApp、任务要求与标准答案并深入剖析其自动化测试如何基于正则匹配与getComputedStyle验证你的选择器写法帮助你掌握 CSS 属性选择器[attrvalue]的语法、适用场景及在 freeCodeCamp 挑战体系中的组织方式。一、挑战在课程体系中的位置这道挑战并非孤立存在它被组织在明确的课程结构中源文件位于 basic-css 挑战文件其 frontmatter 声明了id、title: Use Attribute Selectors to Style Elements、challengeType: 0普通编码挑战以及dashedName: use-attribute-selectors-to-style-elements。挑战顺序由 basic-css 块结构文件 定义该挑战紧跟 Use Clockwise Notation to Specify the Margin of an Element用顺时针记法指定 margin之后紧接着是 Understand Absolute versus Relative Units。这一编排说明课程在讲完 margin/padding 的四值与顺时针简写后自然过渡到如何精准选中需要设置 margin 的元素即属性选择器。该块属于 responsive-web-design 超级模块 的首个 blockbasic-css列在 blocks 数组首位块元数据标注helpCategory: HTML-CSS、blockLayout: legacy-challenge-list表示它以传统挑战列表形式呈现给学员。挑战源文件本身遵循 freeCodeCamp 的 markdown 约定# --description--是学员看到的描述# --instructions--是任务要求# --hints--中内嵌测试代码# --seed--下的## --seed-contents--是编辑器初始 HTML# --solutions--是参考答案。这些字段最终会解析为符合 挑战 Joi 校验 Schema 的对象其中tests数组要求每条测试都有text提示文案与testString测试代码。二、核心概念从 ID/Class 选择器到属性选择器挑战描述的原文逻辑是你此前一直在给元素添加id或class属性来做定向样式即 ID 选择器与 class 选择器但 CSS 还提供其他选择器来选中一组自定义元素。本挑战要使用的是属性选择器[attrvalue]它匹配具有指定属性且属性值相等的元素。挑战中给出的示例是把所有type属性值为radio的元素的外边距改为20px 0px 20px 0px[typeradio] { margin: 20px 0px 20px 0px; }与 class 选择器相比属性选择器的关键差异在于不要求你修改 HTML 结构。class/ID 选择器需要事先在 HTML 中手动加属性属性选择器可以直接利用表单元素与生俱来的type等属性。按语义类别批量选中。CatPhotoApp 表单中有 2 个 radio、3 个 checkbox它们没有单独的 class但共享type属性值一条[typecheckbox]规则即可覆盖全部三个复选框。三、完整挑战实战起始代码与任务起始代码seed是一个逐步生长出来的 CatPhotoApp 页面此时已积累了前面挑战的样式.red-text、h2的 Lobster 字体、.thick-green-border圆形边框、.smaller-image、.silver-background页面结构如下完整起始 HTML 见 挑战源文件的 seed 段落link hrefhttps://fonts.googleapis.com/css?familyLobster relstylesheet typetext/css style .red-text { color: red; } h2 { font-family: Lobster, monospace; } p { font-size: 16px; font-family: monospace; } .thick-green-border { border-color: green; border-width: 10px; border-style: solid; border-radius: 50%; } .smaller-image { width: 100px; } .silver-background { background-color: silver; } /style h2 classred-textCatPhotoApp/h2 main p classred-textClick here to view more a href#cat photos/a./p a href#img classsmaller-image thick-green-border srchttps://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg altA cute orange cat lying on its back./a div classsilver-background pThings cats love:/p ul licatnip/li lilaser pointers/li lilasagna/li /ul pTop 3 things cats hate:/p ol liflea treatment/li lithunder/li liother cats/li /ol /div form actionhttps://freecatphotoapp.com/submit-cat-photo idcat-photo-form labelinput typeradio nameindoor-outdoor checked Indoor/label labelinput typeradio nameindoor-outdoor Outdoor/labelbr labelinput typecheckbox namepersonality checked Loving/label labelinput typecheckbox namepersonality Lazy/label labelinput typecheckbox namepersonality Energetic/labelbr input typetext placeholdercat photo URL required button typesubmitSubmit/button /form /main任务要求原文 instructions使用type属性选择器给 CatPhotoApp 中的复选框checkboxes设置 10px 的上外边距和 15px 的下外边距。注意表单中同时存在typeradio、typecheckbox、typetext以及typesubmit的按钮——若误写成[typeradio]或漏写引号要么选中错误元素要么测试的正则不匹配挑战会失败。标准答案在style块中追加一条属性选择器规则即可挑战源文件 solutions 段落 给出的完整答案与起始代码的唯一差异就是下面这一条[typecheckbox] { margin-top: 10px; margin-bottom: 15px; }这条规则会命中三个namepersonality的复选框Loving / Lazy / Energetic使它们上下与相邻 label 之间形成 10px / 15px 的呼吸空间而 radio 按钮、文本框与提交按钮不受影响。四、验证机制剖析三条测试如何判定你的写法挑战源文件# --hints--段落内嵌的测试代码揭示了判定逻辑这也是理解 freeCodeCamp 边写边测机制的好样本。1. 正则匹配选择器本身assert.match(__helpers.removeHtmlComments(code), /style[\s\S]*?\[\s*?type\s*?\s*?(|)checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?\/style/gi);这条测试在你提交的style…/style范围内做正则匹配要点(|)checkbox\1引号用捕获组 反向引用\1要求属性值两侧引号一致[typecheckbox]与[typecheckbox]都合法而[typecheckbox]会被拒绝\[\s*?type\s*?选择器内部允许空格写法宽松但属性名必须是type、值必须是checkbox先经__helpers.removeHtmlComments(code)去除 HTML 注释避免在注释里藏选择器来骗过测试。2 与 3. 用计算样式验证 margin-top / margin-bottomconst checkboxes document.querySelectorAll([typecheckbox]); assert.isNotEmpty(checkboxes); checkboxes.forEach(function(checkbox) { const marginTop window.getComputedStyle(checkbox)[margin-top]; assert.strictEqual(marginTop, 10px); });margin-bottom 的测试结构相同只是断言margin-bottom严格等于15px。测试自身用[typecheckbox]反查 DOM再通过getComputedStyle读取浏览器实际生效的样式并逐一比对每个复选框——这意味着即使你只给部分复选框生效例如被更高优先级规则覆盖forEach里的严格相等断言也会让挑战失败。五、写法细节与常见坑结合测试代码与 seed 结构可以总结几条实操要点选择器放在style内部正则的匹配范围被限定在style标签内规则必须写在页面样式块中引号可省略但需一致CSS 中[typecheckbox]不加引号也是合法的属性选择器写法但 freeCodeCamp 本挑战的正则要求checkbox两侧成对引号因此答题时务必带引号margin简写与分写均可任务要求上 10px、下 15px既可用margin-top/margin-bottom分写也可用margin: 10px 0px 15px 0px;顺时针简写前一条挑战恰好多值顺时针记法测试只检查计算后的上下边距不要顺手样式化 radio示例代码演示的是[typeradio]但任务目标是 checkbox两者type值不同选错值测试 2/3 的querySelectorAll查不到元素或断言失败。六、这道挑战教你的能力完成这道挑战后你实际掌握的是一条完整的选择器 → 规则 → 生效验证闭环会用[attrvalue]在不改动 HTML 的前提下按属性批量选中同类表单控件理解选择器命中范围与 margin 实际生效范围的关系三个 checkbox 全部命中计算样式一致;了解 freeCodeCamp 课程工程的组织方式挑战 markdown 的分区约定、块级 challengeOrder 排序、以及 Joi 挑战 Schema 对tests数组texttestString的结构约束这些都让课程内容与自动化测试保持同源。后续课程会进入绝对/相对单位、body 继承与优先级specificity等主题属性选择器在此时恰好提供了第一个无需 class 也能精确选点的工具为理解选择器优先级打下直观基础。【免费下载链接】freeCodeCampfreeCodeCamp.orgs open-source codebase and curriculum. Learn math, programming, and computer science for free.项目地址: https://gitcode.com/GitHub_Trending/fr/freeCodeCamp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考