重学前端
程劭非(winter)
前手机淘宝前端负责人
立即订阅
32948 人已学习
课程目录
已完结 58 讲
0/4登录后,你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起,重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一:JavaScript (15讲)
JavaScript类型:关于类型,有哪些你不知道的细节?
JavaScript对象:面向对象还是基于对象?
JavaScript对象:我们真的需要模拟类吗?
JavaScript对象:你知道全部的对象分类吗?
JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?
JavaScript执行(二):闭包和执行上下文到底是怎么回事?
JavaScript执行(三):你知道现在有多少种函数吗?
JavaScript执行(四):try里面放return,finally还会执行吗?
JavaScript词法:为什么12.toString会报错?
(小实验)理解编译原理:一个四则运算的解释器
JavaScript语法(预备篇):到底要不要写分号呢?
JavaScript语法(一):在script标签写export为什么会抛错?
JavaScript语法(二):你知道哪些JavaScript语句?
JavaScript语法(三):什么是表达式语句?
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
模块二:HTML和CSS (16讲)
HTML语义:div和span不是够用了吗?
HTML语义:如何运用语义类标签来呈现Wiki网页?
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
CSS 选择器:如何选中svg里的a元素?
CSS选择器:伪元素是怎么回事儿?
HTML链接:除了a标签,还有哪些标签叫链接?
CSS排版:从毕升开始,我们就开始用正常流了
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
HTML小实验:用代码分析HTML标准
CSS Flex排版:为什么垂直居中这么难?
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
HTML语言:DTD到底是什么?
CSS渲染:CSS是如何绘制颜色的?
CSS小实验:动手做,用代码挖掘CSS属性
HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与API (9讲)
浏览器:一个浏览器是如何工作的?(阶段一)
浏览器:一个浏览器是如何工作的?(阶段二)
浏览器:一个浏览器是如何工作的(阶段三)
浏览器:一个浏览器是如何工作的?(阶段四)
浏览器:一个浏览器是如何工作的?(阶段五)
浏览器DOM:你知道HTML的节点有哪几种吗?
浏览器CSSOM:如何获取一个元素的准确位置
浏览器事件:为什么会有捕获过程和冒泡过程?
浏览器API(小实验):动手整理全部API
模块四:前端综合应用 (5讲)
性能:前端的性能到底对业务数据有多大的影响?
工具链:什么样的工具链才能提升团队效率?
持续集成:几十个前端一起工作,如何保证工作质量?
搭建系统:大量的低价值需求应该如何应对?
前端架构:前端架构有哪些核心问题?
特别加餐 (9讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑(一):前端代码单元测试怎么做?
期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
重学前端
登录|注册

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

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

简单选择器

我们在前面说过,简单选择器是针对某一特征判断是否为选中元素。今天我会为你介绍一系列常见的简单选择器,我们把相似的简单选择器放在一起,这样更易于你去记忆。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(14)

  • 不曾潇洒
    老师这儿描述有点问题:
    属性选择器第四种[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
    2019-03-13
    31
  • GETStrongBENice
    属性以某值开头不是[attr^=xxx]吗(捂脸
    2019-03-12
    10
  • 阿成
    没想到写个 querySelector 这么费劲...
    还有很多情况没处理到的...
    emmm... 选择器字符串解析的部分应该上词法和语法分析的..
    差不多能用吧就...
    https://github.com/aimergenge/my-querySelector
    2019-03-06
    1
    9
  • 一步

    选择器 描述
    [attribute] 用于选取带有指定属性的元素。
    [attribute=value] 用于选取带有指定属性和值的元素。
    [attribute~=value] 用于选取属性值中包含指定词汇的元素。
    [attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
    [attribute^=value] 匹配属性值以指定值开头的每个元素。
    [attribute$=value] 匹配属性值以指定值结尾的每个元素。
    [attribute*=value] 匹配属性值中包含指定值的每个元素。
    2019-03-20
    6
  • CC
    namespace 和 of-type 系列的选择器的知识点,没想到之前居然完全被自己忽略。

    系统性的学习才不会遗漏,才会有叠加效果。
    2019-03-05
    5
  • 不曾潇洒
    属性选择器
    第三种[attr~=val]的描述也会让人误解为选择器该表达式的val为空格分隔的序列,而实际是只匹配的目标元素上attr属性值为空格分隔的多个值:
    表示带有以 attr 命名的属性的元素,并且该属性是一个以空格作为分隔的值列表,其中[至少]一个值匹配"value"。
    2019-03-14
    3
  • Nino
    都是平常会用到的一些特性,被老师总结一下觉得系统多了。另外,老师的英文发音好随意啊。。
    2019-06-03
    1
    1
  • 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]
    }
    2019-03-13
    1
  • oillie
    id可以用document.getElementById
    class可以用document.getElementsByClassName
    tag可以用document.getElementsByTagName
    attribute没直接API可用,本人能想到的是可以先取全部document.getElementByTagName('*')再过滤
    2019-03-05
    1
  • kaiking
    老师,发现这节的属性选择器,讲得有点抽象,我尽管曾经用过,但对于你的描述,看完后反而疑惑更大了,像那些太过抽象的理论,建议结合案例。
    好的课程在精不在多,祝愿老师越办越好,桃李满天下
    2019-10-11
  • 若如
    之前看过jquery的选择器 最后的作业有点类似 收货颇丰
    2019-09-07
  • 渴望做梦
    老师,属性选择器第三种[att=~val]这个不是选择值里面包含有val的元素吗,好像和您的表述不太一致,我传递了多个 val 用空格分隔,并没有选中多个元素。
    2019-07-12
  • 涂涂
    引用张大佬的文章话:

    HTML5允许行内SVG和MathML,这就意味着,你可以使用同一个样式文件定义行内SVG、MathML元素的样式。

    HTML5的解析的好处是,如果文档是HTML(而非XHTML),HTML5的解析器可以暗中分配命名空间到已知的词汇(到目前为止,SVG, XML和MathML)。这就意味着你无需使用xmlns为您的HTML5文档中的SVG或MathML元素明确指定命名空间。
    2019-07-09
  • [已重置]
    查了一些资料也没太弄明白为什么 svg 就在 http://www.w3.org/2000/svg 这个命名空间下,好像是规范里就规定了svg属于这个命名空间?
    2019-03-07
    1
收起评论
14
返回
顶部