美文网首页
HTML选择器记忆加强法

HTML选择器记忆加强法

作者: A徐亮波KingA | 来源:发表于2025-09-28 16:27 被阅读0次

你的想法非常好!用记忆法(联想、谐音、故事、口诀等)可以大大增强对知识点的记忆。下面以 CSS 选择器为例,给你一些实用的记忆法建议:


1. id选择器(#)

  • 口诀/联想
    “#”像一口“井”,id 唯一,就像井号唯一。
    记忆句:“爱迪生在井边”(“id”=“爱迪”,#像井)
    id选择器用#,就像爱迪生在井边

2. class选择器(.)

  • 口诀/联想
    “.”像班级点名的点,class就是班级。
    记忆句:“班级点名用小点”(class选择器用.)

3. 后代选择器(空格)

  • 口诀/联想
    “父子之间有空格,后代选择器用空格”
    记忆句:“空格隔几代,都是后代”

4. 子选择器(>)

  • 口诀/联想
    “>像父子关系的箭头,指向直接的孩子”
    记忆句:“大于号指亲儿子”

5. 相邻兄弟选择器(+)

  • 口诀/联想
    “+像两兄弟肩并肩,相邻兄弟用+”
    记忆句:“加号连兄弟”

6. 通用兄弟选择器(~)

  • 口诀/联想
    “~像一条波浪线,连着所有兄弟”
    记忆句:“波浪线连所有兄弟”

7. 属性选择器([ ])

  • 口诀/联想
    “方括号像筛子,筛属性”
    记忆句:“方括号筛属性”

8. 伪类选择器(:)

  • 口诀/联想
    “冒号像表情,伪装的类”
    记忆句:“冒号变伪类”

9. 伪元素选择器(::)

  • 口诀/联想
    “两个冒号,伪元素更深入”
    记忆句:“双冒号搞元素”

10. 记忆法建议

  • 口诀法:编顺口溜、口诀(如上所示)
  • 形象联想法:把符号和生活中熟悉的事物关联
  • 故事法:编小故事,比如“爱迪生(id)在井边(#)发明电灯”
  • 对比法:把易混淆的选择器并列记忆
  • 口诀卡片:写在便签、卡片、Anki等工具中反复记忆

11. 练习建议

  • 自己动手为每个知识点编一个专属记忆句/口诀
  • 多做题、多写代码,联想口诀加深印象
  • 每天复习、默写一遍

示例总结

  • id选择器:# —— “爱迪生在井边”
  • class选择器:. —— “班级点名用小点”
  • 后代选择器:空格 —— “空格隔几代,都是后代”
  • 子选择器:> —— “大于号指亲儿子”
  • 相邻兄弟:+ —— “加号连兄弟”
  • 通用兄弟:~ —— “波浪线连所有兄弟”

如需针对其他技术知识点定制记忆法,欢迎随时提问!

相关文章

  • HTML5选择器

    @(HTML5)[HTML5选择器] [TOC] 二、HTML5选择器 CSS选择器回顾 ID选择器 类名选择器:...

  • CSS学习笔记(一):选择器

    选择器 1.元素选择器 元素选择器:文档(HTML、XML)的元素就是最基本的选择器,html所有元素如html ...

  • CSS选择器(一)

    常用的CSS选择器主要有三种: 元素选择器 类选择器 ID选择器 元素选择器 定义:以HTML标签(又叫HTML元...

  • CSS选择器

    标签选择器(html中的标签名称) id选择器(html标签中绑定的id名) 类选择器(html标签中绑定的cla...

  • 2020-07-08 CSS 笔记

    CSS选择器 标签选择器 类选择器 class在HTML中可多次调用 id选择器1 id在HTML中只能单次调用 ...

  • 选择器

    选择器作用:选择特定的HTML页面元素 基础选择器: 1、标签选择器:用HTML标签作为选择器,按标签名称分类,为...

  • 学习笔记-CSS-2017.2.14

    CSS 选择器 1、CSS 元素选择器 如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、...

  • CSS入门

    选择器+样式 eg: CSS规则集 选择器:HTML 元素的名称位于规则集开始(本例是p选择器 )。HTML 元素...

  • css(选择器,权重,继承)

    选择器分类: 元素选择器(html,body,p)、通配符选择器(*)、类选择器、ID选择器、属性选择器(span...

  • JQ学习笔记

    jQuery · 选择器 选择器,用来查找html标签(元素) · 基本选择器 · 层级选择器 后代选择器 子元素...

网友评论

      本文标题:HTML选择器记忆加强法

      本文链接:https://www.haomeiwen.com/subject/gflxtstx.html