内容简介：重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏，本文讲一讲css选择器的一些机制。根据一些特征，选中元素树上的一批元素。
笔记说明
重学前端是程劭非（winter）【前手机淘宝前端负责人】在极客时间开的一个专栏， 每天10分钟，重构你的前端知识体系 ，笔者主要整理学习过程的一些要点笔记以及感悟，完整的可以加入winter的专栏学习【原文有winter的语音】，如有侵权请联系我，邮箱：kaimo313@foxmail.com。
一、引言
本文讲一讲css选择器的一些机制。
二、选择器的基本意义
根据一些特征，选中元素树上的一批元素。
选择器的结构分类
简单选择器 复合选择器 复杂选择器 选择器列表
三、简单选择器
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>
如图所示：
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/ 进行代码编写，查看效果 ）
4.4、其它伪类选择器
-
国际化：用于处理国际化和多语言问题。dir lang
-
音频 / 视频：用于区分音视频播放状态。play pause
-
时序：用于配合读屏软件等时序性客户端的伪类。current past future
-
表格：用于处理table的列的伪类。nth-col nth-last-col
个人总结
很多都没有用过 _(:3」∠)_ 。。。
以上所述就是小编给大家介绍的《重学前端学习笔记（二十一）--如何选中svg里的a元素？》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- JQuery选中select组件被选中的值方法
- JQuery选中select组件被选中的值方法
- android 中心区域选中图表 WheelChart
- python – Django检查是否选中了复选框
- 在ng-repeat内Checkbox默认选中
- Xshell 配置 鼠标选中即复制，右键即粘贴的功能
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入浅出React和Redux
程墨 / 机械工业出版社 / 2017-4-28 / 69
本书作者是资深开发人员，有过多年的开发经验，总结了自己使用React和Redux的实战经验，系统分析React和Redux结合的优势，与开发技巧，为开发大型系统提供参考。主要内容包括：React的基础知识、如何设计易于维护的React组件、如何使用Redux控制数据流、React和Redux的相结合的方式、同构的React和Redux架构、React和Redux的性能优化、组件的测试等。一起来看看 《深入浅出React和Redux》 这本书的介绍吧!
