CSS學習筆記(三) CSS選擇器

charles_paul 發布于2019-08-28 18:01 / 2450人閱讀

摘要：規則命名慣例規則由選擇符和聲明兩部分組成，其中選擇符用于指出規則所要選擇的元素，聲明則又由兩部分組成屬性和值。用于選擇作為指定祖先元素后代的標簽。維基百科在其引證中大量使用了偽類。維基百科的引證鏈接就是正文里那些不起眼的數字鏈接。

1.為文檔添加樣式的三種方法

行內樣式（寫在特定 HTML 標簽的 style 屬性里）

嵌入樣式（嵌入的 CSS 樣式是放在 HTML 文檔的 head 元素中）

鏈接樣式
在創建包含多個頁面的網站時，需要把樣式集中在一個多帶帶的文件里，這個文件就叫 樣式表。樣式表其實就是一個擴展名為 .css 的文本文件。可以在任意多個 HTMl 頁面中鏈接同一個樣式表文件，每個頁面中只需加入類似下面的一行代碼即可：

  除了以上三種為頁面添加樣式的方法，還有一種在樣式表中鏈接其它樣式表的方法，那就是應用 @import 指令。就像這樣：@import url(css/styles2.css).

  要注意的是， @import 指令必須出現在樣式表中其他樣式之前，否則 @import 引用的樣式表不會被加載。

2.CSS規則命名慣例

CSS 規則由 選擇符 和聲明兩部分組成，其中選擇符用于指出規則所要選擇的元素，聲明則又由兩部分組成：屬性和值。屬性指出要影響元素哪方面的樣式，值就是屬性的一個新狀態。

對于這個基本的結構，有三種方法可以進行擴展：

多個聲明包含在一條規則里

多個選擇符組合在一起

多條規則應用給一條選擇符

所有用于選擇特定元素的選擇符又分三種：

上下文選擇符（基于祖先或同胞元素選擇一個元素）

ID和類選擇符（基于 id 和 class 屬性的值選擇的元素）

屬性選擇符（基于屬性的有無和特征選擇元素）

3.上下文選擇符

格式：標簽 1 標簽 2 {聲明}
示例：article p {font-weight:bold;}
說明：標簽2就是我們想要選擇目標，而且只有在標簽 1 是是其祖先元素（不一定是父元素）的情況下才會被選中。

上下文選擇符，嚴格來講（也就是 CSS 規范里），叫后代組合式選擇符（ descendant combinator selector），就是一組以空格分隔的標簽名。用于選擇作為指定祖先元素后代的標簽。

提示：請記住，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號作為分隔符。

4.特殊的上下文選擇符 4.1 子選擇符 >

格式：標簽 1 > 標簽 2
示例：section > h2 {font-style:italic;}
說明：標簽 2 必須是標簽 1 的子元素，或者反過來說，標簽 1 必須是標簽 2 的父元素。與常規的上下文選擇符不同，這個選擇符中的標簽 1 不能是標簽 2 的父元素之外的其他祖先元素。

4.2 緊鄰同胞選擇符 +

格式：標簽 1 + 標簽 2
示例：h2 + p {font-variant:small-caps;}
說明：標簽 2 必須緊跟在其同胞標簽 1 的后面。

4.3 一般同胞選擇符 ~

格式：標簽 1 ~ 標簽 2
示例：h2 ~ a {color:red;}
說明：標簽 2 必須跟（不一定緊跟）在其同胞標簽 1 后面。

4.4 通用選擇符 *

格式：* {...}
示例：* {color:green;}
說明：上面示例會導致所有元素（的文本和邊框）都變成綠色。
不過，一般在使用 * 選擇符時，都會同時使用另一個選擇符。
例如：p * {color:red;} // 這樣只會把p包含的所有元素的文本變成紅色。
還有一個非常有意思的用法，即用它構成非子選擇符：
例如：section * a {font-size:1.3em;}
這樣，任何是 section 孫子元素，而非子元素的 a 標簽都會被選中。至于 a
的父元素是什么，沒有關系。
總之，只有一個標簽名的選擇符會選中頁面中所有相同標簽的實例。而通過上下文
選擇符，則可以指定標簽必須具備相應的祖先或同胞。

5.ID 和類選擇符

ID 和類為我們選擇元素提供了另一套手段，利用它們可以不用考慮文檔的層次結構。

  注意：可以給 id 和 class 屬性設定任何值，但不能以數字或特殊符號開頭。

5.1 類屬性 5.1.1 類選擇符

格式：.類名
示例：.specialtext {font-style:italic;}

5.1.2 標簽帶類選擇符

格式：標簽名.類名
示例：p.specialtext {color:red;}

5.1.3 多類選擇符

格式：.類名.類名
示例：.specialtext.featured {font-size:120%;}
說明：CSS選擇符的兩個類名之間沒有空格，因為我們只想選擇同時具有這兩個類名的的那個元素。如果加了空格，那就變成了“祖先/后代”關系的上下文選擇符了。

提示：不要像使用 ID 一樣，每個類都指定一個不同的類名，然后再為每個類編寫規則。如果你確實有這種隨意使用類的習慣，那說明你可能想大多數對 CSS 充滿激情的初學者一樣，還不了解繼承和上下文選擇符的作用。 于是，你可能會給每個標簽都重復寫同樣的樣式（比如為頁面中很多標簽分別指定相同的字體）。實際上，繼承和上下文選擇符能讓不同的標簽共享樣式，從而降低你需要編寫和維護的 CSS 量。

5.2 ID屬性

格式：#ID名 或 標簽名#ID名
示例：#specialtext {CSS 樣式聲明 } 或 p#specialtext {CSS 樣式聲明 }

提示：ID還可以用于頁內導航。 例如：Biography，注意 href 屬性值開頭的 # ，它表示這個鏈接的目標在當前頁面中，因而不會觸發瀏覽器加載頁面（如果沒有 #，瀏覽器就會嘗試加載 bio 目錄下的默認頁面了）。如果鏈接的 href 屬性里只有一個 #，那么點擊該鏈接會返回頁面頂部。例如：Back to Top，換句話說，要寫一個“返回頂部”鏈接，根本不需要 ID 為 # 的目標元素。

注意：如果暫時不知道某個 href 應該放什么 URL，也可以用 # 作為占位符，但不能把該屬性留空。 因為 href 屬性值為空的鏈接的行為跟正常鏈接不一樣。這樣，團隊中的其他人將來可以用中間層（比如 PHP）變量替換 #，以便動態接收來自數據庫的 URL。

6.屬性選擇符 6.1 屬性名選擇符

格式：標簽名[屬性名]
示例：img[title] {border:2px solid blue;}

提示：一般來說，人們經常給 alt 和 title 屬性設定相同的值。 alt 屬性中的文本會在圖片因故未能加載時顯示，或者由屏幕閱讀器朗讀出來。而 title 屬性會在用戶鼠標移動到圖片上時，顯示一個包含相應文本的提示。

6.2 屬性值選擇符

格式：[屬性名="屬性值"]
示例：img[title="red flower"] {border:4px solid green;}
說明：在 HTML5 中，屬性值的引號可加可不加，在此為了清楚起見，建議添加。

7.偽類

  偽類（Pseudo classes）是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是 selector:pseudo class { property: value; }，簡單地用一個半角英文冒號（:）來隔開選擇符和偽類。

偽類可以分為兩種：

UI（ User Interface，用戶界面）偽類會在 HTML 元素處于某個狀態時（比如鼠標
指針位于鏈接上），為該元素應用 CSS 樣式。

結構化偽類會在標記中存在某種結構上的關系時（如某個元素是一組元素中的第
一個或最后一個），為相應元素應用 CSS 樣式。

7.1 UI偽類 7.1.1 鏈接偽類

針對鏈接的偽類一共有4個，因為鏈接始終會處于如下4種狀態之一。

Link

Visited

Hover

Active

提示：由于這4個偽類的特指度相同，如果不按照這里列出的順序使用它們，瀏覽器可能不會顯示預期效果。方便記憶：LoVe? HA! 大寫字母就是每個偽類的頭一個字母。

提示：一個冒號（ : ）表示偽類，兩個冒號（ :: ）表示 CSS3 新增的偽元素。

7.1.2 :focus偽類

表單中的文本字段在用戶單擊它時會獲得焦點，然后用戶才能在其中輸入字符。
例如：input:focus {border:1px solid blue;}
上面一行代碼會在光標位于 input 字段中時，為該字段添加一個藍色邊框。這樣可以讓用戶明確地知道輸入的字符會出現在哪里。

7.1.3 :target偽類

如果用戶點擊一個指向頁面中其他元素的鏈接，則那個元素就是目標（ target），可以
用:target 偽類選中它。
例如：對于這個鏈接：More Information
位于頁面的其它地方、ID 為 more_info 的那個元素就是目標。
假設該元素為這樣：

This is the information you are looking for.

那么，CSS規則：#more_info:target {background:#eee}
會在用戶單擊鏈接轉向 ID 為 more_info 的元素時，為該元素添加灰色背景。

維基百科在其引證中大量使用了:target 偽類。維基百科的引證鏈接就是正文里那些
不起眼的數字鏈接。引證本身則位于長長的頁面的最下方。如果沒有:target 應用的
突出顯示，很難知道你點擊的鏈接對應著一大堆引證中的哪一個。

7.2 結構化偽類

結構化偽類可以根據標記的結構應用樣式，比如根據某元素的父元素或前面的同胞元素是什么。

7.2.1 :first-child和:last-child

格式：
e:first-child
e:last-child
示例：ol.results li:first-child {color:blue;}

7.2.2 :nth-child

格式：e:nth-child(n)
示例：li:nth-child(3)
說明：e 表示元素名，n 表示一個數值（也可以使用 odd 或 even）

8.偽元素

顧名思義，偽元素就是你的文檔中若有實無的元素。

8.1 ::first-letter偽元素

格式：e::first-letter
示例：p::first-letter {font-size:300%;}

提示：如果不用偽元素創建這個首字符放大效果，必須手工給該字母加上標簽，
然后再為該標簽應用樣式。而偽元素實際上是替我們添加了無形的標簽。

8.2 ::first-line偽元素

格式：e::first-line
示例：p::first-line {font-variant:small-caps;}
說明：選中文本段落（一般情況下是段落）的第一行。

8.3 ::before和::after偽元素

格式：
e::before
e::after
示例：
對標記：

添加如下樣式：
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
會得到如下結果：
Age: 25 years.

提示：如果標簽中的內容是通過數據庫查詢生成的結果，那么用這種技巧再合適不過了。
因為所有結果都是數字，使用這兩個偽元素可以在把數字呈現給用戶時，加上說明
性文字。

參考資料

CSS設計指南

云服務器 GPU云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

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

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

重學前端學習筆記（十三）--瀏覽器工作解析（三）

摘要：三操作過程首先，須把規則進行處理。后代選擇器空格后代選擇器的作用范圍是父節點的所有子節點，因此規則是在匹配到本標簽的結束標簽時回退。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，...

trigkit4 2019-08-02 16:17 評論0 收藏0
重學前端學習筆記（十三）--瀏覽器工作解析（三）

摘要：三操作過程首先，須把規則進行處理。后代選擇器空格后代選擇器的作用范圍是父節點的所有子節點，因此規則是在匹配到本標簽的結束標簽時回退。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，...

yintaolaowanzi 2019-08-26 13:45 評論0 收藏0
重學前端學習筆記（十三）--瀏覽器工作解析（三）

摘要：三操作過程首先，須把規則進行處理。后代選擇器空格后代選擇器的作用范圍是父節點的所有子節點，因此規則是在匹配到本標簽的結束標簽時回退。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學習【原文有winter的語音】，如有侵權請聯系我，...

KitorinZero 2019-08-30 10:52 評論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