CSS 選擇器：如何選中svg裡的a元素？
所有前端體系的集合連結：web之路
選擇器是由CSS 最先引入的一個機制（但隨著document.querySelector 等API的加入，選擇器已經不僅僅是CSS的一部分了）
選擇器的基本意義是：根據一些特徵，選中元素樹上的一批元素
分類：
- 簡單選擇器：針對某一特徵判斷是否選中元素
- 複合選擇器：連續寫在一起的簡單選擇器，針對元素自身特徵選擇單個元素
- 複雜選擇器：由 空格 > ~ + || 等符號連線的複合選擇器，根據父元素或者前序元素檢查單個元素
- 選擇器列表，由逗號分隔的複雜選擇器，表示 或 的關係
簡單選擇器
image.png
型別選擇器和合體選擇器
根據一個元素的標籤名來選中元素
div {
}
我們還必須考慮html 或者 xml的名稱空間問題
svg 和 html 都有a標籤 我們若要想區分選擇svg 的 a 和html 的 a，就必須用帶名稱空間的型別選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<svg width="100" height="28" viewBox="0 0 100 28" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<desc>Example link01 - a link on an ellipse
</desc>
<a xlink:href="http://www.w3.org">
<text y="100%">name</text>
</a>
</svg>
<br/>
<a href="javascript:void 0;">name</a>
</body>
</html>
@namespace svg url(http://www.w3.org/2000/svg);
@namespace html url(http://www.w3.org/1999/xhtml);
svg|a {
stroke:blue;
stroke-width:1;
}
html|a {
font-size:40px
}
有一個特殊的選擇器，就是*，叫做全體選擇器，可以選中任何元素。用法跟型別選擇器完全一致
id選擇器和class選擇器
#myid {
stroke:blue;
stroke-width:1;
}
.mycls {
font-size:40px
}
屬性選擇器出來之後，其實是可以一定程度上代替它們的，但是class 選擇器識別的是：用空格分隔的class語法
<a class="a b c">xxx</a>
.a {
color:red;
}
屬性選擇器
根據html元素的屬性來選中元素，一共四種形態
- [att]
直接在方括號中放屬性名1，是檢查元素是否具有這個屬性，只要元素有這個屬性，不論屬性是什麼值，都可以被選中
- [att=val]
精確匹配，檢查一個元素屬性值是否是val
- [att~=val]
多種匹配，檢查一個元素的值是否是若干值之一，這裡的val不是一個單一的值，可以使用空格間隔的一個序列
- [att|=val]
開頭匹配，檢查一個元素的值是否是以val 開頭，它跟精確匹配的區別是屬性只要以val 開頭即可
有些HTML屬性含有特殊字元，可以獎val用引號括起來，形成一個CSS字串，可以使用單引號來規避，也可以用反斜槓轉義
偽類選擇器
一系列由CSS 規定好的選擇器，它們以冒號開頭。分為普通和函式兩個型別
樹結構關係偽類選擇器
:root 偽類 表示樹的根元素，在選擇器是針對完整的HTML文件時，我們一般用HTML標籤即可選中根元素，但隨著scoped css 和 shadow root 等出現，選擇器可以針對某一子樹來選擇，這個時候就需要root 偽類了
- :empty 偽類表示沒有子節點的元素，這裡有個例外就是子節點為空白文字的情況
- :nth-child和 :nth-last-child ，CSS 的An+B語法設計的時比較複雜的
image.png
- :nth-last-child 的區別僅僅時從後往前數
- :first-child :last-child 分別表示第一個和最後一個元素
- :only-child 選中唯一一個子元素
of-type系列，是一個語法糖，S:nth-of-type(An+B) 是 :nth-child(|An+B| of S)的另一種寫法
所以也有 nth-last-of-type、first-of-type、last-of-type、only-of-type
連結與行為偽類選擇器
- :any-link 表示任意的連結，包括 a、area和link標籤
- :link 表示未訪問過的連結
- :visited 表示訪問過的連結
- :hover 表示滑鼠懸停在上的元素
- :active 表示使用者正在啟用這個元素
- :focus 表示焦點落在這個元素上
- :target 用於選中瀏覽器URL的 hash部分所指示的元素
邏輯偽類元素
介紹一下:not偽類，作用是選中內部的簡單選擇器命中的元素
*|*:not(:hover)
其他偽類選擇器
- 國際化：處理國際化和多語言問題
- dir
- lang
- 音訊/視訊：用於區分音視訊播放狀態
- play
- pause
- 時序：用於配合讀屏軟體等時序性客戶端的偽類
- current
- past
- future
- 表格：用於處理table的列的偽類
- nth-col
- nth-last-col
參考原文： CSS 選擇器：如何選中svg裡的a元素？