选择器    描述
[attribute]    用于选取带有指定属性的元素。
[attribute=value]    用于选取带有指定属性和值的元素。
[attribute~=value]    用于选取属性值中包含指定词汇的元素。
[attribute|=value]    用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]    匹配属性值以指定值开头的每个元素。
[attribute$=value]    匹配属性值以指定值结尾的每个元素。
[attribute*=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元素明确指定命名空间。