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

IamDLY 發(fā)布于2019-08-02 15:06 / 1438人閱讀

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

筆記說明

重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，郵箱：kaimo313@foxmail.com。

一、引言

本文講一講css選擇器的一些機制。

二、選擇器的基本意義

根據一些特征，選中元素樹上的一批元素。

選擇器的結構分類

簡單選擇器：針對某一特征判斷是否選中元素。

復合選擇器：連續(xù)寫在一起的簡單選擇器，針對元素自身特征選擇單個元素。

復雜選擇器：由“（空格）”“ >”“ ~”“ +”“ ||”等符號連接的復合選擇器，根據父元素或者前序元素檢查單個元素。

選擇器列表：由逗號分隔的復雜選擇器，表示“或”的關系。

三、簡單選擇器

3.1、類型選擇器和全體選擇器

svg 和 html 中都有 a 元素，若要想區(qū)分選擇 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、屬性選擇器

四中形態(tài)

[att]：直接在方括號中放入屬性名，是檢查元素是否具有這個屬性。

[att=val]：精確匹配，檢查一個元素屬性的值是否是 val。

[att~=val]：多種匹配，檢查一個元素的值是否是若干值之一。

[att|=val]：開頭匹配，檢查一個元素的值是否是以 val 開頭，后面內容不管。

四、偽類選擇器 4.1、樹結構關系偽類選擇器

:root：偽類表示樹的根元素。

:empty：偽類表示沒有子節(jié)點的元素。

:nth-child：

:nth-last-child：的區(qū)別僅僅是從后往前數。

: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

音頻 / 視頻：用于區(qū)分音視頻播放狀態(tài)。

play

pause

時序：用于配合讀屏軟件等時序性客戶端的偽類。

current

past

future

表格：用于處理 table 的列的偽類。

nth-col

nth-last-col

個人總結

很多都沒有用過_(:3」∠)_。。。

云服務器 GPU云服務器二十一如何學習前端如何學習前端開發(fā) 深度學習里的

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

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

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

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

jemygraw 2019-08-26 13:51 評論0 收藏0
重學前端學習筆記（二十一）--如何選中svg里的a元素？

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

CloudwiseAPM 2019-08-30 10:57 評論0 收藏0
重學前端學習筆記（二十二）--選擇器的機制

摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點。后代表示選中符合條件的子節(jié)點。直接后繼表示選中對應列中符合條件的單元格。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【...

acrazing 2019-08-02 16:18 評論0 收藏0
重學前端學習筆記（二十二）--選擇器的機制

摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點。后代表示選中符合條件的子節(jié)點。直接后繼表示選中對應列中符合條件的單元格。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【...

jeffrey_up 2019-08-26 13:52 評論0 收藏0