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

CloudwiseAPM 发布于2019-08-30 10:57 / 3235人阅读

摘要：二选择器的基本意义根据一些特征，选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。

笔记说明

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

一、引言

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

二、选择器的基本意义

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

选择器的结构分类

简单选择器：针对某一特征判断是否选中元素。

复合选择器：连续写在一起的简单选择器，针对元素自身特征选择单个元素。

复杂选择器：由“（空格）”“ >”“ ~”“ +”“ ||”等符号连接的复合选择器，根据父元素或者前序元素检查单个元素。

选择器列表：由逗号分隔的复杂选择器，表示“或”的关系。

三、简单选择器

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

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

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





    
    namespace
    



    
    

    htmlname

如图所示：

3.2、id 选择器与 class 选择器

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

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

.myclass {
  font-size: 40px
}

3.3、属性选择器

四中形态

[att]：直接在方括号中放入属性名，是检查元素是否具有这个属性。

[att=val]：精确匹配，检查一个元素属性的值是否是 val。

[att~=val]：多种匹配，检查一个元素的值是否是若干值之一。

[att|=val]：开头匹配，检查一个元素的值是否是以 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不能包含另外一个否定选择器。详情链接

我是一个段落。

我好看极了！

我不是一个段落。

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

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

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

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

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

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

4.4、其它伪类选择器

国际化：用于处理国际化和多语言问题。

dir

lang

音频 / 视频：用于区分音视频播放状态。

play

pause

时序：用于配合读屏软件等时序性客户端的伪类。

current

past

future

表格：用于处理 table 的列的伪类。

nth-col

nth-last-col

个人总结

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

云服务器 GPU云服务器二十一如何学习前端如何学习前端开发深度学习里的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114676.html

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

摘要：二选择器的基本意义根据一些特征，选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入wint...

jemygraw 2019-08-26 13:51 评论0 收藏0
重学前端学习笔记（二十一）--如何选中svg里的a元素？

摘要：二选择器的基本意义根据一些特征，选中元素树上的一批元素。四伪类选择器树结构关系伪类选择器伪类表示树的根元素。伪类表示没有子节点的元素。表示焦点落在这个元素之上。用于选中浏览器的部分所指示的元素。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入wint...

IamDLY 2019-08-02 15:06 评论0 收藏0
重学前端学习笔记（二十二）--选择器的机制

摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

acrazing 2019-08-02 16:18 评论0 收藏0
重学前端学习笔记（二十二）--选择器的机制

摘要：优先级第一优先级无连接符号第二优先级空格第三优先级复杂选择器的连接符号空格表示选中所有符合条件的后代节点。后代表示选中符合条件的子节点。直接后继表示选中对应列中符合条件的单元格。笔记说明重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，每天10分钟，重构你的前端知识体系，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【...

jeffrey_up 2019-08-26 13:52 评论0 收藏0