CSS新增方法 選擇器分類 選擇器組合 樣式優先順序

2021-10-07 11:16:35 字數 2759 閱讀 7422

選擇器分類

css選擇器組合語法

樣式表允許以多種方式規定樣式資訊。樣式可以規定在單個的 html 元素中，在 html 頁的頭元素中，或在乙個外部的 css 檔案中，甚至可以在 html 結構中設定樣式表。

\"color: red; font-size: 20px;">hello world\
當單個檔案需要特別樣式時，就可以使用內部樣式表。可以在 head 部分通過 標籤定義內部樣式表，exp：

當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，可以通過更改乙個檔案來改變整個站點的外觀。使用外聯樣式是為了解決內容與表現分離的問題，外部樣式表通常儲存在 .css 檔案中，exp：

萬用字元選擇器直接使用 「*」，會對所有標籤產生效果，通常用於樣式初始化，exp：

*
標籤選擇器又稱為 「元素選擇器」 或 「型別選擇器（type selector）」，標籤選擇器直接以標籤名作為選擇器名稱，通常用於樣式初始化，exp：

body
id 選擇器以乙個井號顯示，id 屬性只能在每個 html 文件**現一次，具備唯一性，exp：

#about
類選擇器以乙個點號顯示，類名的第乙個字元不能使用數字，在實際專案中使用場景是最多的，exp：

.center
在上面的例子中，所有擁有 center 類的 html 元素均為居中。

在 html 中，乙個 class 值中可能包含乙個詞列表，各個詞之間用空格分隔。例如希望將乙個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：

"important warning">注意事項
這兩個詞的順序無關緊要，寫成 warning important 也可以。

選擇器可以結合起來使用，已達到條件的篩選限制，exp：

p.important
選擇器現在會匹配 class 屬性包含 important 的所有 p 元素，但是其他任何型別的元素都不匹配，不論是否有此 class 屬性。選擇器 p.important 解釋為：「其 class 屬性值為 important 的所有 p 元素」。

並列關係可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告。用 「逗號」 將需要分組的選擇器分開，在實際專案中會大量使用，exp：

h1,h2,h3,h4,h5,h6
派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。派生語法使用 「空格」 分隔選擇器，通過合理地使用派生選擇器，我們可以使 html **變得更加整潔，在實際專案中會大量使用，exp：

li p


/*該樣式僅針對 後的 */
如果不希望選擇任意的後代元素，而是希望縮小範圍，只選擇某個元素的子元素，可以使用子元素選擇器，其語法為使用 「>」 分隔選擇器，exp：

h1 > strong
，這個規則僅針對 h1 的子級 strong 元素，其子級的子級 strong 元素不受影響。

「>」 分隔符兩邊可以有空白符，這是可選的。因此，以下寫法都沒有問題：

h1 > strong


h1> strong


h1 >strong


h1>strong
如果需要選擇緊接在另乙個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（adjacent sibling selector）其語法為使用 「+」 或 「~」 分隔選擇器，語法規範同子級關係選擇器一致，exp：

h1 + p


/*這個規則僅針對 h1 相鄰靠後的乙個 p 元素。*/


h1 ~ p


/* 這個規則針對 h1 相鄰靠後的全部 p 元素。*/
當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？

一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

當同乙個 html 元素被不止乙個樣式定義時，會使用哪個樣式呢？

一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

瀏覽器預設預設設定

外部樣式表

內部樣式表（位於 標籤內部）

行級樣式（在 html 元素內部）

然而實際使用時會遵守 「就近原則」，即離 html 元素近的樣式設定優先順序會更高，因此，外部樣式表樣式設定優先順序有可能高於內部樣式表，exp：

hello world
此外選擇器的使用也存在優先順序問題，該權重高於 「就近原則」，通常而言 「id選擇器」 優先順序最高，其次分別依次是 「類選擇器」 「標籤選擇器」。對於相同選擇器設定同一樣式還會受到選擇器層級細分度影響，在同等細分度情況下則遵循 "就近原則"

最後！important 關鍵字可以設定最高樣式優先順序，不受前面所提的規則限制，當然如果存在同一樣式的多個 important 設定，還是遵循 「就近原則」 的。

CSS 選擇器分類

二 選擇器分組 三 偽類 懸浮 h1 h1即為標籤名，但是往往標籤不止乙個。bbb 後面對應的是id，因為id在網頁中的唯一性，所以可以找到唯一的標籤，但除非特殊用途不推薦使用。class a class class a class b 類選擇器span 使用最多的選擇器，推薦使用。e att va...

css選擇器分類

css選擇器大致可以分為10大類 1 元素選擇器 如 p 2 類選擇器 如 xx 3 id選擇器 如 xx 4 關聯選擇器 如 p a 5 子元素選擇器 如 p a 6 相鄰兄弟選擇器 如 p a 匹配的是緊鄰p元素後面的a元素 7 組合選擇器 如 p,a 8 元素選擇器 如 img alt 匹配包...

CSS選擇器分類

終於找了乙份相對較全面的css選擇器總結 跳 個人總結了乙份大概概覽 基礎選擇器 元素，類，id 層次選擇器 後代a b 子代a b 相鄰兄弟a b 通用兄弟 a b 偽類選擇器 1 動態偽類 使用者操作的 hover active focus 2 目標偽類 target 3 ui元素偽類 hove...