重學前端學習筆記（二十一）--如何選中svg里的a元素？

jemygraw 發布于2019-08-26 13:51 / 1714人閱讀

摘要：二選擇器的基本意義根據一些特征，選中元素樹上的一批元素。四偽類選擇器樹結構關系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節點的元素。表示焦點落在這個元素之上。用于選中瀏覽器的部分所指示的元素。

筆記說明

重學前端是程劭非（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云服務器二十一如何學習前端如何學習前端開發深度學習里的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109661.html

重學前端學習筆記（二十一）--如何選中svg里的a元素？

摘要：二選擇器的基本意義根據一些特征，選中元素樹上的一批元素。四偽類選擇器樹結構關系偽類選擇器偽類表示樹的根元素。偽類表示沒有子節點的元素。表示焦點落在這個元素之上。用于選中瀏覽器的部分所指示的元素。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入wint...

CloudwiseAPM 2019-08-30 10:57 評論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