重学前端学习笔记（二十一）--如何选中svg里的a元素？

栏目: 后端 · 前端 · 发布时间: 6年前

内容简介：重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，本文讲一讲css选择器的一些机制。根据一些特征，选中元素树上的一批元素。

笔记说明

重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。

一、引言

本文讲一讲css选择器的一些机制。

二、选择器的基本意义

根据一些特征，选中元素树上的一批元素。

选择器的结构分类

简单选择器
复合选择器
复杂选择器
选择器列表

三、简单选择器

重学前端学习笔记（二十一）--如何选中svg里的a元素？

3.1、类型选择器和全体选择器

svg 和 html 中都有 a 元素，若要想区分选择 svg 中的 a 和 html 中的 a ，就必须用带 命名空间 的类型选择器。

svg 元素在： http://www.w3.org/2000/svg 命名空间之下。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>namespace</title>
    <style>
        @namespace svg url(http://www.w3.org/2000/svg);
        @namespace html url(http://www.w3.org/1999/xhtml);

        svg|a {
            stroke: hotpink;
            stroke-width: 1;
        }

        html|a {
            font-size: 40px;
            color: green;
        }
    </style>
</head>

<body>
    <svg width="100" height="100"
        viewBox="0 0 100 50" version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <desc>Example</desc>
        <a xlink:href="http://www.w3.org">
            <text y="100%">svgname</text>
        </a>
    </svg>
    <br />
    <a href="javascript:void 0;">htmlname</a>
</body>

</html>

如图所示：

重学前端学习笔记（二十一）--如何选中svg里的a元素？

3.2、id 选择器与 class 选择器

id 选择器是 # 号后面跟随 id 名， class 选择器是 . 后面跟随 class 名。

#myid {
  stroke: blue;
  stroke-width: 1;
}

.myclass {
  font-size: 40px
}

3.3、属性选择器

四中形态

[att]
[att=val]
[att~=val]
[att|=val]

四、伪类选择器

4.1、树结构关系伪类选择器

:root ：伪类表示树的根元素。
:empty ：伪类表示没有子节点的元素。
:nth-child ：
:nth-last-child ：的区别仅仅是从后往前数。
:first-child :last-child ：分别表示第一个和最后一个元素。
:only-child ：选中唯一一个子元素。

4.2、链接与行为伪类选择器

:any-link ：表示任意的链接，包括 a、area 和 link 标签都可能匹配到这个伪类。
:link ：表示未访问过的链接。
:visited ：表示已经访问过的链接。
:hover ：表示鼠标悬停在上的元素。
:active ：表示正在激活这个元素。
:focus ：表示焦点落在这个元素之上。
:target ：用于选中浏览器 URL 的 hash 部分所指示的元素。

4.3、逻辑伪类选择器

CSS 否定伪类 :not(X) ，是以一个简单的以选择器X为参数的功能性标记函数。它匹配不符合参数选择器X描述的元素。X不能包含另外一个否定选择器。详情链接

<p>我是一个段落。</p>
<p class="fancy">我好看极了！</p>
<div>我不是一个段落。</div>

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* 类名不是 `.fancy` 的 <p> 元素 */
p:not(.fancy) {
  color: green;
}

/* 非 <p> 元素 */
body :not(p) {
  text-decoration: underline;
}

/* 非 <div> 或 <span> 的元素 */
body :not(div):not(span) {
  font-weight: bold;
}

/* 类名不是 `.crazy` or `.fancy` 的元素 */
/* 注意，此语法尚未被较好地支持。 */
body :not(.crazy, .fancy) {
  font-family: sans-serif;
}

结果如图：（可以打开：https://codepen.io/pen/ 进行代码编写，查看效果）

重学前端学习笔记（二十一）--如何选中svg里的a元素？

4.4、其它伪类选择器

国际化 ：用于处理国际化和多语言问题。
```
dir
lang
```
音频 / 视频 ：用于区分音视频播放状态。
```
play
pause
```
时序 ：用于配合读屏软件等时序性客户端的伪类。
```
current
past
future
```
表格 ：用于处理 table 的列的伪类。
```
nth-col
nth-last-col
```

个人总结

很多都没有用过 _(:3」∠)_ 。。。

以上所述就是小编给大家介绍的《重学前端学习笔记（二十一）--如何选中svg里的a元素？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

JavaScript & jQuery

David Sawyer McFarland / O Reilly / 2011-10-28 / USD 39.99

You don't need programming experience to add interactive and visual effects to your web pages with JavaScript. This Missing Manual shows you how the jQuery library makes JavaScript programming fun, ea......一起来看看《JavaScript & jQuery》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

重学前端学习笔记（二十一）--如何选中svg里的a元素？

笔记说明

一、引言

二、选择器的基本意义

三、简单选择器

3.1、类型选择器和全体选择器

3.2、id 选择器与 class 选择器

3.3、属性选择器

四、伪类选择器

4.1、树结构关系伪类选择器

4.2、链接与行为伪类选择器

4.3、逻辑伪类选择器

4.4、其它伪类选择器

个人总结

JavaScript & jQuery

CSS 压缩/解压工具

URL 编码/解码