如何使用css選擇器定位網頁的一部分

CSS選擇器是格式化網頁的強大工具。瞭解它們是如何工作的，這將使您作為開發人員的生活更輕鬆。...

層疊樣式表（CSS）允許您轉換網頁的外觀。從字型和顏色到間距和整體佈局，各種各樣的設計工具就在您的指尖。儘管CSS是一門複雜的語言，但只有兩個基本概念需要你理解才能開始。

這一切都是從準確地確定頁面的哪一部分需要設定樣式開始的。

css=選擇器+宣告

CSS檔案包含一系列規則，描述HTML檔案的格式。每一條規則都由兩部分組成：設定什麼樣式以及如何設定樣式。第一部分使用一系列稱為“選擇器”的術語進行控制

本文中的示例包括樣式宣告，但它們不是重點：選擇器本身就是。

歷史上，有三個CSS選擇器級別（或版本）具有不同程度的瀏覽器支援。到2020年，根據CaniUse的資料，全世界99%以上的使用者都可以使用。

一級選擇器

一級介紹了四種基本型別的選擇器，這些選擇器涵蓋了大量的情況，甚至在今天。

Pattern	Matches
電子	所有E元素
c	class=“c”的所有元素
#粘蟲	id=“myid”的元素
埃弗	E元素中的F元素
偽類
E:連結	指向以前未訪問過的頁面的超連結
E:參觀過嗎	指向已訪問頁面的超連結
E:啟用	當前選定的超連結
偽元素
E：：一線	E元素的第一個格式化行
E:第一個字母	E元素的第一個格式化字母

類別選擇器

最簡單的選擇器是“型別選擇器”。它針對元素的所有例項，例如段落或粗體文字：

p { margin-bottom: 0; }b { font-family: sans-serif; }

類選擇器

class屬性允許向HTML元素新增更多的語義，例如特定型別的段落。這些元素可以在CSS中選擇，如下所示：

.intro { font-weight: bold; }

此選擇器將匹配：

但請注意，它也會匹配：

如果您只想將其應用於簡介段落，可以將型別選擇器和類選擇器結合使用：

p.intro { font-weight: bold; }

選擇符

HTML id屬性在文件中應該是唯一的，例如，如果您有：

這應該是唯一具有“contents”id的元素。id選擇器允許您將文件中的特定元素作為目標：

#contents { color: #333; }

後代選擇器

嚴格地說，這是一個“組合詞”，因為這個選擇符是關於兩個其他選擇符之間的空間的。HTML是分層的，正如我們在DOM概述中所解釋的那樣。子體選擇器允許透過另一個元素中的上下文來標識元素：

table b { font-weight: normal; }

偽類和元素

偽選擇器的目標是不顯式存在但仍然可用的類或元素。將其視為特殊內容獎勵：

p::first-line { text-transform: uppercase; }

選擇器列表

如果要將相同的規則集應用於每個規則，請使用逗號將選擇器組合到列表中。而不是：

th { padding: 1em; }td { padding: 1em; }

你可以寫：

th, td { padding: 1em; }

特**

樣式表是一系列使用選擇器匹配元素的規則，但是當多個規則匹配給定元素時會發生什麼？由此產生的行為由“特殊性”控制，該“特殊性”定義了在以下情況下使用的規則：

p.intro { color: black; }p { color: gray; }

在這種情況下，優先權規則由其特殊性來定義，如下所示：

ID選擇器（“contents”）是最具體的。
類選擇器（`.author`）沒有那麼具體。
型別選擇器（`p`）是最不特定的。

在計算特**時，只有兩個選擇者在較高級別上的得分相同時才考慮每個級別，因此“#contents”比“contents”更具體文章.新聞第。作者特別因為前者在ID選擇器上“獲勝”。

二級選擇器

CSS選擇器的下一個版本引入了屬性選擇器，擴充套件了偽類和偽元素，並添加了兩個新的組合符。

Pattern	Matches
*	任何元素
E&gt；F公司	F元素E元素的子元素
E+F公司	緊跟在E元素前面的F元素
屬性選擇器
E[foo]	具有“foo”屬性的E元素
E[foo=“bar”]	一個E元素，其“foo”屬性正好是“bar”
E[foo~=“巴”]	一種E元素，其“foo”屬性是一組以空格分隔的值，其中一個是“bar”
E[foo \|=“en”]	一種E元素，其“foo”屬性具有以“en”開頭的以連字元分隔的值列表
偽類
E:第一個孩子	E元素，其父元素的第一個子元素
E:lang（法語）	“fr”語言中E類元素
偽元素
E：：之前	在E元素的內容之前生成的內容
E：：之後	在E元素的內容之後生成的內容

通配選擇符

“*”匹配任何元素。它通常不是很有用，但是如果您想重置任何預設頁邊距，例如，您可以這樣做：

* { margin: 0; }

屬性選擇符

屬性選擇器允許透過元素的屬性對樣式進行非常明確的篩選：

a[title] { text-decoration: underline dotted; }

子組合詞：緊跟在另一個組合詞中的元素

類似於後代組合子，但此組合子只匹配直系子代，而不匹配樹下面的任何子代。例如，“ul>li”將只匹配此處的“Section 1”文字，而不匹配“Section 1.1”：

<ul><li>Section 1<ul><li>Section 1.1</li><li>Section 1.2</li></ul><li></ul>

相鄰兄弟組合：下一個同級

h1 + p { font-weight: bold; }

此選擇器通常用於控制邊距或沒有特定類的介紹性段落，僅當一個元素緊跟在另一個元素之後時才匹配該元素。在本例中，只匹配第一段，不匹配第二段：

<h1>Contents</h1>some extra text<p>Introductory paragraph</p><p>Following paragraph</p>

注意，當決定下一個同級是什麼時，此選擇器只考慮元素而不是文字。

繼承

一些CSS屬性從祖先元素繼承其值。在實踐中，這意味著例如設定“body”元素的字體面意味著每個段落、表等也使用相同的字體面。

當然，這正是您所期望的，但是考慮一個不繼承的屬性：“margin”，例如。您不希望每個段落或粗體文字的邊距都與整個文件相同。

相關：簡單的CSS程式碼示例，你可以在10分鐘內學會

一個好的經驗法則是儘可能地以元素為目標，當一個簡單的“body”選擇器可以做到時，不要以每個元素為目標。

三級選擇器

在這個級別中添加了更多的偽類，以及一些屬性選擇器和一個新的組合器。

Pattern	Matches
東方不敗	前有E元素的F元素
屬性選擇器
E[foo^=“bar”]	一個E元素，其“foo”屬性以字串“bar”開頭
E[foo$=“吧檯”]	一個E元素，其“foo”屬性以字串“bar”結尾
E[foo*=“巴”]	一個E元素，其“foo”屬性包含子字串“bar”
偽類
E:根	一個E元素，文件的根
E:第n個孩子（n）	一個E元素，其父元素的第n個子元素
E:第n個孩子（n）	一個E元素，其父元素的第n個子元素，從最後一個開始計算
E:第n種類型（n）	一個E元素，它的第n個同級元素
E:型別（n）的第n個結尾	一個E元素，它的第n個同級元素，從最後一個元素開始計算
E:最後一個孩子	E元素，其父元素的最後一個子元素
E:第一種	一個E元素，它的第一個同級元素
E:最後一種	一個E元素，它的最後一個同級元素
E:獨生子女	一個E元素，它的父元素的唯一子元素
E:僅適用於	一個E元素，只有它的同級元素
E:空的	沒有子元素的E元素（包括文字節點）
E:目標	作為引用URI的目標的E元素
E:啟用	啟用的使用者介面元素E
E:禁用	禁用的使用者介面元素E
E:檢查過了	一種被檢查的使用者介面元素E
E:不是	與簡單選擇器s不匹配的E元素