web之路让前端飞程序员

【十五】CSS 选择器：如何选中svg里的a元素？

2019-03-10  本文已影响3人  alanwhy

所有前端体系的集合链接：web之路

选择器是由CSS 最先引入的一个机制（但随着document.querySelector 等API的加入，选择器已经不仅仅是CSS的一部分了）

选择器的基本意义是：根据一些特征，选中元素树上的一批元素

分类：

简单选择器

image.png
类型选择器和合体选择器

根据一个元素的标签名来选中元素

   div {

   }

我们还必须考虑html 或者 xml的命名空间问题

svg 和 html 都有a标签 我们若要想区分选择svg 的 a 和html 的 a，就必须用带命名空间的类型选择器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<svg width="100" height="28" viewBox="0 0 100 28" version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Example link01 - a link on an ellipse
  </desc>
  <a xlink:href="http://www.w3.org">
    <text y="100%">name</text>
  </a>
</svg>
<br/>
<a href="javascript:void 0;">name</a>
</body>
</html>

@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml);
svg|a {
  stroke:blue;
  stroke-width:1;
}

html|a {
  font-size:40px
}

有一个特殊的选择器，就是*，叫做全体选择器，可以选中任何元素。用法跟类型选择器完全一致

id选择器和class选择器
#myid {
  stroke:blue;
  stroke-width:1;
}

.mycls {
  font-size:40px
}

属性选择器出来之后，其实是可以一定程度上代替它们的，但是class 选择器识别的是：用空格分隔的class语法

<a class="a b c">xxx</a>
.a {
    color:red;
}
属性选择器

根据html元素的属性来选中元素，一共四种形态

直接在方括号中放属性名1，是检查元素是否具有这个属性，只要元素有这个属性，不论属性是什么值，都可以被选中

精确匹配，检查一个元素属性值是否是val

多种匹配，检查一个元素的值是否是若干值之一，这里的val不是一个单一的值，可以使用空格间隔的一个序列

开头匹配，检查一个元素的值是否是以val 开头，它跟精确匹配的区别是属性只要以val 开头即可

有些HTML属性含有特殊字符，可以奖val用引号括起来，形成一个CSS字符串，可以使用单引号来规避，也可以用反斜杠转义

伪类选择器

一系列由CSS 规定好的选择器，它们以冒号开头。分为普通和函数两个类型

树结构关系伪类选择器

:root 伪类 表示树的根元素，在选择器是针对完整的HTML文档时，我们一般用HTML标签即可选中根元素，但随着scoped css 和 shadow root 等出现，选择器可以针对某一子树来选择，这个时候就需要root 伪类了

image.png

of-type系列，是一个语法糖，S:nth-of-type(An+B) 是 :nth-child(|An+B| of S)的另一种写法
所以也有 nth-last-of-type、first-of-type、last-of-type、only-of-type

链接与行为伪类选择器
逻辑伪类元素

介绍一下:not伪类，作用是选中内部的简单选择器命中的元素

*|*:not(:hover)
其他伪类选择器

参考原文：CSS 选择器：如何选中svg里的a元素？

上一篇下一篇

猜你喜欢

热点阅读