重学前端 21 # 如何选中svg里的a元素?

简介: 重学前端 21 # 如何选中svg里的a元素?

一、引言


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




二、选择器的基本意义


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


选择器的结构分类


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


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


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


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





三、简单选择器


ab8844ae103a6f37a8e8d8fb493a950b.png



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


svg 和 html 中都有 a 元素,若要想区分选择 svg 中的 ahtml 中的 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>


如图所示:

20190520013509293.png


20190520013552893.png


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-child1f5fe3f384603926e40982f19cdcec28.png
  • :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/ 进行代码编写,查看效果


20190520013643865.png


4.4、其它伪类选择器


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

   dir

   lang


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

   play

   pause


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

   current

   past

   future


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

   nth-col

   nth-last-col




目录
相关文章
|
2月前
|
前端开发
Web前端开发------网页分组元素
Web前端开发------网页分组元素
46 0
|
2月前
|
前端开发 Java
java前端:删除数组中指定元素的方法
java前端:删除数组中指定元素的方法
|
9月前
|
算法 前端开发
前端算法-存在重复元素
前端算法-存在重复元素
|
20天前
|
前端开发
前端 CSS 经典:元素倒影
前端 CSS 经典:元素倒影
10 1
|
20天前
|
前端开发
前端 CSS 经典:保持元素宽高比
前端 CSS 经典:保持元素宽高比
15 0
|
2月前
|
前端开发
|
2月前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
2月前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
|
2月前
|
前端开发 JavaScript UED
【Web 前端】说几个未知宽高元素水平垂直居中方法?
【4月更文挑战第22天】【Web 前端】说几个未知宽高元素水平垂直居中方法?
|
2月前
|
前端开发 JavaScript UED
【Web 前端】常用的块级元素和行内元素有哪一些?
【4月更文挑战第22天】【Web 前端】常用的块级元素和行内元素有哪一些?