掌握 CSSelectors：帶有範例的完整指南
- 王林原創
- 2024-09-07 00:00:27769瀏覽
介紹
在本文中，我們將討論 CSS3 選擇器，對於每個想要在更少編寫的情況下做更多事情的人來說，這是一個非常強大的工具。無論您是剛開始還是在提陞技能，本指南都會引導您從基礎知識到進階內容。
準備好要提升你的 CSS 技能了嗎？讓我們開始吧！
基本 CSS3 選擇器
選擇器是我們用來從 HTML 樹中挑選某些元素的工具。顧名思義，基本 CSS3 選擇器是每個開發人員工具包中都應該擁有的基本選擇器。它們包括 Type 、 Class 、 ID 、 Universal 和 Attribute 選擇器。讓我們更深入地研究其中的每一個。
類型選擇器
這些選擇器根據 HTML 元素的標籤名稱來定位它們。例如，p { 顏色：藍色； } 會將所有段落元素設為藍色。
類別選擇器
這些選擇器根據 HTML 元素的類別屬性來定位 HTML 元素。例如，.alert { color: red; } 會將所有「alert」類別的元素設為紅色。
ID 選擇器
這些選擇器針對具有特定 id 屬性的唯一元素。例如，#navbar { 背景顏色：黑色； } 將為 id 為「navbar」的元素設定黑色背景的樣式。
通用選擇器
這些選擇器針對頁面上的所有元素。例如，* { 邊距：0; } 將刪除頁面上所有元素的邊距。
屬性選擇器
這些選擇器根據元素的屬性和值來定位元素。例如，a[href="https://google.com"] { color: blue; } 會將所有指向 Google 的連結設為藍色。
簡短的編碼範例
類型選擇器 : h1 { color: green; } 將所有 h1 標題設為綠色。
-
類型選擇器 : p { font-size: 16px; } 將選擇所有段落元素 (
) 並將其字體大小設為 16 像素。
類別選擇器 : .info { font-size: 18px; } 會將所有「info」類別元素的字體大小設為 18px。
類別選擇器 : .highlight { 背景顏色: 黃色; } 將選擇所有具有「highlight」類別的元素並將其背景顏色設為黃色。
ID 選擇器 : #footer { padding: 20px; } 將為 id 為「footer」的元素加上 20px 的內邊距。
ID 選擇器 : #header { height: 60px; } 將選擇 ID 為「header」的元素並將其高度設為 60 像素。
通用選擇器 : * { font-family: Arial, sans-serif; } 會將所有元素的字體設為 Arial。
通用選擇器 : * { box-sizing: border-box; } 將選擇頁面上的所有元素，並將其box-sizing 屬性設為“border-box”，其中包含元素總寬度和高度中的內邊距和邊框。
屬性選擇器 : img[alt] { border: 2px Solid black; } 將為所有具有 alt 屬性的圖像添加邊框。
屬性選擇器 : input[type="text"] { width: 100%; - 這將選擇所有類型為「text」的輸入元素，並將其寬度設為其父容器的100%。
偽類選擇器
偽類選擇器是 CSS 中的一項強大功能，它允許我們根據元素在文件結構中的狀態或位置而不是其類型、屬性或類別來選擇元素並設定元素樣式。它們有助於創建動態和響應式設計。
動態偽類
動態偽類包括根據使用者互動而變化的樣式。例如，a:hover { 顏色: 紅色; } 將滑鼠懸停在連結上時將顏色變更為紅色。
結構偽類
結構偽類根據元素在文件結構中的位置來選擇元素。例如，p：first-child {font-weight：bold; } 將使第一段在其包含元素中變成粗體。
否定偽類
否定偽類 :not() 從選擇中排除特定元素。例如，div:not(.highlight) { 背景顏色：黃色； } 會將所有 div 的背景顏色改為黃色，除了那些具有「highlight」類別的 div。
輸入偽類
輸入偽類用於根據表單元素的狀態設定樣式。例如，輸入：停用{不透明度：0.5; } 將以半不透明度設定停用的輸入欄位的樣式。
簡短的編碼範例
動態偽類 : a:focus { Outline: none;點擊或透過鍵盤導航到連結時，將從連結中刪除焦點輪廓。
動態偽類 : 按鈕:active { 背景顏色: 紅色; } 將按鈕的背景顏色在點擊按鈕時改為紅色。
結構偽類 : li:last-child { color: red; } 會將每個清單中的最後一個清單項目設為紅色。
結構偽類 : p:nth-child(2) { color: blue; } 將選擇其父元素中的第二段並將文字著色為藍色。
否定偽類 : p:not(.no-border) { border: 1px Solid black; } 將為所有沒有「無邊框」類別的段落加上邊框。
否定偽類別 : div:not(#exclude) { border: 1px Solid green; } 將為所有沒有 id「exclude」的 div 元素新增邊框。
輸入偽類 : input:checked { 背景顏色: green; } 會將選取的輸入元素的背景顏色改為綠色。
輸入偽類 : input:valid { border: 2px Solid green; } 將根據驗證規則為所有有效輸入欄位新增綠色邊框。
偽類元素
偽元素選擇器允許我們設定文件的某些部分的樣式。它們可用於設定元素的第一個字母或行的樣式，或在 HTML 元素之前或之後插入內容。
偽元素前後
這些偽元素讓我們可以在元素內容之前或之後插入內容。
範例：
p::before {
content: "Read this - ";
color: red;
}
這將在每個段落的內容之前插入「閱讀此 - 」並將其塗成紅色。
首字母與第一行偽元素
這些偽元素用來設定文字區塊的第一個字母或第一行的樣式。
範例：
p::first-letter {
font-size: 20px;
color: blue;
}
這將使每個段落的第一個字母大小為 20px，顏色為藍色。
簡短的編碼範例
p::after { content: "*"; } - 這將在每個段落後面加上一個星號 (*)。
.warning::before { content: "警告: ";字體粗細：粗體；顏色: 紅色; - 這將在「警告」類別的元素內容之前加上「警告：」。文字將為粗體和紅色。
blockquote::first-line { font-weight: 粗體; } - 這將使每個區塊引用的第一行變成粗體。
div::first-letter { 文字變換：大寫； } - 這會將每個 div 的第一個字母轉換為大寫。
h1::after { content: "";顏色：綠色； } - 這將在每個 h1 元素後面加上一個綠色複選標記。
Codepen 範例
偽元素和偽類是我最喜歡的一些選擇器，要真正理解它們，我建議您進行大量練習。
以下是 Codepen 上的一些範例，您可以嘗試：
範例1
教學
範例2
教學
範例3
教學
這些範例看起來很簡單，但如果您檢查程式碼，您會發現它們是用很少的偽類製成的！
組合器選擇器
CSS 中的組合選擇器是選擇與其他元素滿足某些關係標準的特定元素的強大方法。這些選擇器允許我們根據元素在文件樹中的關係來定位元素，例如某個元素是否是另一個元素的子元素、後代元素或同級元素。
後代組合器
後代組合子以空格表示。它選擇某個元素的後代元素。
範例：
div p { color: blue;}
這將選擇所有
作為
div p { background-color: yellow;}
這將選擇所有
作為
子組合器
子組合器以 > 表示。它選擇某個元素的直接子元素。
範例：
div > p { color: blue;}
這將選擇所有
作為
div > p { border: 1px solid red;}
This will select all
elements that are direct children of a
Adjacent Sibling Combinators
An adjacent sibling combinator is denoted by +. It selects an element that is directly after another specific element.
Example:
div + p { color: blue;}
This will select any
element that is directly after a
General Sibling Combinators
A general sibling combinator is denoted by ~. It selects elements that are siblings of a certain element.
Example:
div ~ p { color: blue;}
This will select all
elements that are siblings of a
Advanced CSS3 Selectors
Advanced CSS3 selectors provide more precise targeting capabilities than basic selectors. These include attribute selectors with various matchers and nth-child/nth-of-type selectors.
Attribute Selectors with Various Matchers
Attribute selectors can be used with various matchers to select elements based on specific conditions related to their attributes.
Example:
input[type="text"] {
color: blue;
}
This will select all input elements with the type attribute of "text" and color the text blue.
Nth-child and Nth-of-type Selectors
The nth-child and nth-of-type selectors are used to select elements based on their position in the parent element.
Example:
p:nth-child(2) {
color: red;
}
This will select the second child paragraph of its parent element and color the text red.
Short Coding Examples
Attribute Selector with Matcher: a[href^="https"] {font-style: italic;} - This will select all links that have an href attribute that starts with "https" and make the text italic.
Attribute Selector with Matcher: input[type$="text"] {background-color: yellow;} - This will select all input elements that have a type attribute that ends with "text" and give them a yellow background.
Nth-child Selector: li:nth-child(odd) {background-color: grey;} - This will select all odd-numbered list items and give them a grey background.
Nth-of-type Selector: p:nth-of-type(3n) {font-weight: bold;} - This will select every third paragraph and make the text bold.
Best Practices for Using CSS3 Selectors
Use the Right Selector : The key to using CSS3 selectors effectively is to use the right selector for the job. For instance, use class selectors when you want to style a group of elements and ID selectors for unique elements.
Avoid Over-Specification : Over-specifying selectors can make your CSS hard to maintain. Stick to simple selectors as much as possible.
Use Shorthand Properties : Shorthand properties can make your CSS cleaner and easier to read. For example, use margin: 0 auto; instead of margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto;.
Group Selectors : If multiple selectors share the same style declaration, group them together to keep your CSS DRY (Don't Repeat Yourself).
Comment Your Code : Commenting your CSS can help you and others understand what your code does, especially when using complex selectors.
Use Pseudo-classes and Pseudo-elements : These can help you target elements based on their state or position in the document, which can make your CSS more dynamic and responsive.
Keep Specificity Low : Overly specific selectors can lead to specificity wars, making it hard to override styles later. Keep your specificity as low as possible.
Test Across Different Browsers : Different browsers can interpret CSS selectors differently. Always test your CSS across different browsers to ensure consistency.
Conclusion
In conclusion, selectors, ranging from basic type, class, and ID selectors to advanced pseudo-classes, pseudo-elements, and combinators, provide a powerful toolset for styling HTML elements. By understanding and applying these selectors, you can create dynamic, responsive, and aesthetically pleasing websites.
However, it's important to follow best practices such as using the right selector for the job, avoiding over-specification, grouping selectors, and testing across different browsers to ensure the maintainability and consistency of your CSS code.
? Hello, I'm Eleftheria, Community Manager, developer, public speaker, and content creator.
？如果您喜歡這篇文章，請考慮分享。
？ 所有連結 | X | 領英
以上是掌握 CSSelectors：帶有範例的完整指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！