CSS 选择器：如何选中svg里的a元素？

老师这儿描述有点问题: 属性选择器第四种[attr|=value] 应该是表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。 [attr^=value] 表示带有以 attr 命名的属性，且属性值是以"value"开头的元素。 出处:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors

选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。

属性以某值开头不是[attr^=xxx]吗（捂脸

没想到写个 querySelector 这么费劲... 还有很多情况没处理到的... emmm... 选择器字符串解析的部分应该上词法和语法分析的.. 差不多能用吧就... https://github.com/aimergenge/my-querySelector

namespace 和 of-type 系列的选择器的知识点，没想到之前居然完全被自己忽略。 系统性的学习才不会遗漏，才会有叠加效果。

属性选择器 第三种[attr~=val]的描述也会让人误解为选择器该表达式的val为空格分隔的序列，而实际是只匹配的目标元素上attr属性值为空格分隔的多个值: 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中[至少]一个值匹配"value"。

function querySelector (selector, rootNode = document) { let [first, rest] = splitSelectorStr(selector) let nodes = findNodes(rootNode, first) if (nodes.length > 0) { if (rest.length === 0) { return nodes[0] } for (let node of nodes) { let res = querySelector(rest, node) if (res) { return res } } } return null } function findNodes (rootNode, selector) { let head = selector.charAt(0) let body = selector.slice(1) switch (head) { case '.': return rootNode.getElementsByClassName(body) case '#': return [rootNode.getElementById(body)] default: return rootNode.getElementsByTagName(selector) } } function splitSelectorStr (selector) { let s = selector.trim() let i = s.indexOf(' ') let first, rest if (i === -1) { first = s rest = '' } else { first = s.slice(0, i) rest = s.slice(i + 1) } return [first, rest] }

引用张大佬的文章话： HTML5允许行内SVG和MathML，这就意味着，你可以使用同一个样式文件定义行内SVG、MathML元素的样式。 HTML5的解析的好处是，如果文档是HTML(而非XHTML)，HTML5的解析器可以暗中分配命名空间到已知的词汇（到目前为止，SVG, XML和MathML）。这就意味着你无需使用xmlns为您的HTML5文档中的SVG或MathML元素明确指定命名空间。

id可以用document.getElementById class可以用document.getElementsByClassName tag可以用document.getElementsByTagName attribute没直接API可用，本人能想到的是可以先取全部document.getElementByTagName('*')再过滤

都是平常会用到的一些特性，被老师总结一下觉得系统多了。另外，老师的英文发音好随意啊。。