重学前端进修笔记（二十一）--怎样选中svg里的a元素？

2019年9月1日 221次阅读 来源: 凯小默

笔记申明

重学前端是程劭非（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元素？》

《重学前端进修笔记（二十一）--怎样选中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]：准确婚配，搜检一个元素属性的值是不是是 val。
  • [att~=val]：多种婚配，搜检一个元素的值是不是是多少值之一。
  • [att|=val]：开首婚配，搜检一个元素的值是不是是以 val 开首，背面内容不论。

四、伪类挑选器

4.1、树构造关联伪类挑选器

  • :root：伪类示意树的根元素。
  • :empty：伪类示意没有子节点的元素。
  • :nth-child：《重学前端进修笔记（二十一）--怎样选中svg里的a元素？》
  • :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」∠)_。。。

    原文作者：凯小默
    原文地址: https://segmentfault.com/a/1190000019230218
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞