重学前端
程劭非(winter)
前手机淘宝前端负责人
104095 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 57 讲
开篇词+学习路线+架构图 (3讲)
重学前端
15
15
1.0x
00:00/00:00
登录|注册

CSS 选择器:如何选中svg里的a元素?

你好,我是 winter。
我们在之前 CSS 语法课程中,已经介绍了关于选择器的一部分基础知识。在今天的这一课里,我们来系统学习一下 CSS 选择器。
在 CSS 语法课程中,我们已经见过一些选择器了,但在进入到具体的选择器介绍之前,我们首先要对选择器有一个整体的认识。
我先来讲讲选择器是什么,选择器是由 CSS 最先引入的一个机制(但随着 document.querySelector 等 API 的加入,选择器已经不仅仅是 CSS 的一部分了)。我们今天这一课,就重点讲讲 CSS 选择器的一些机制。
选择器的基本意义是:根据一些特征,选中元素树上的一批元素。
我们把选择器的结构分一下类,那么由简单到复杂可以分成以下几种。
简单选择器:针对某一特征判断是否选中元素。
复合选择器:连续写在一起的简单选择器,针对元素自身特征选择单个元素。
复杂选择器:由“(空格)”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器,根据父元素或者前序元素检查单个元素。
选择器列表:由逗号分隔的复杂选择器,表示“或”的关系。
我们可以看到,选择器是由简单选择器逐级组合而成的结构,那么我们就来首先看一下简单选择器。

简单选择器

我们在前面说过,简单选择器是针对某一特征判断是否为选中元素。今天我会为你介绍一系列常见的简单选择器,我们把相似的简单选择器放在一起,这样更易于你去记忆。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结
仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《重学前端》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(21)

  • 最新
  • 精选
  • 不曾潇洒
    老师这儿描述有点问题: 属性选择器第四种[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
    1
    61
  • 一步
    选择器 描述 [attribute] 用于选取带有指定属性的元素。 [attribute=value] 用于选取带有指定属性和值的元素。 [attribute~=value] 用于选取属性值中包含指定词汇的元素。 [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。 [attribute^=value] 匹配属性值以指定值开头的每个元素。 [attribute$=value] 匹配属性值以指定值结尾的每个元素。 [attribute*=value] 匹配属性值中包含指定值的每个元素。
    30
  • GETStrongBENice
    属性以某值开头不是[attr^=xxx]吗(捂脸
    1
    12
  • 阿成
    没想到写个 querySelector 这么费劲... 还有很多情况没处理到的... emmm... 选择器字符串解析的部分应该上词法和语法分析的.. 差不多能用吧就... https://github.com/aimergenge/my-querySelector
    2
    12
  • CC
    namespace 和 of-type 系列的选择器的知识点,没想到之前居然完全被自己忽略。 系统性的学习才不会遗漏,才会有叠加效果。
    7
  • 不曾潇洒
    属性选择器 第三种[attr~=val]的描述也会让人误解为选择器该表达式的val为空格分隔的序列,而实际是只匹配的目标元素上attr属性值为空格分隔的多个值: 表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中[至少]一个值匹配"value"。
    5
  • within〃
    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] }
    4
  • 涂涂
    引用张大佬的文章话: HTML5允许行内SVG和MathML,这就意味着,你可以使用同一个样式文件定义行内SVG、MathML元素的样式。 HTML5的解析的好处是,如果文档是HTML(而非XHTML),HTML5的解析器可以暗中分配命名空间到已知的词汇(到目前为止,SVG, XML和MathML)。这就意味着你无需使用xmlns为您的HTML5文档中的SVG或MathML元素明确指定命名空间。
    3
  • oillie
    id可以用document.getElementById class可以用document.getElementsByClassName tag可以用document.getElementsByTagName attribute没直接API可用,本人能想到的是可以先取全部document.getElementByTagName('*')再过滤
    2
  • Nino
    都是平常会用到的一些特性,被老师总结一下觉得系统多了。另外,老师的英文发音好随意啊。。
    2
    1
收起评论
显示
设置
留言
21
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部