柚子快報邀請碼778899分享：css常用選擇器（一）
柚子快報邀請碼778899分享：css常用選擇器（一）
目錄
前言
選擇器
1.類選擇器（.class）
2.ID選擇器（#id）
3.元素選擇器（element）
4.后代選擇器（element element）
5.子元素選擇器（element > element）
6.偽元素選擇器（::before, ::after, ::first-line, ::first-letter等）
7.偽元素選擇器（::before, ::after, ::first-line, ::first-letter等）
8.屬性選擇器（[attribute], [attribute=value], [attribute~=value], [attribute|=value]等）
9.相鄰兄弟選擇器（element + element）教程
10.通用選擇器（*）教程
前言
這里主要介紹：
類選擇器（.class）ID選擇器（#id）元素選擇器（element）后代選擇器（element element）子元素選擇器（element > element）偽類選擇器（:hover, :first-child, :nth-child(n), :not(selector), :checked, :disabled等）偽元素選擇器（::before, ::after, ::first-line, ::first-letter等）屬性選擇器（[attribute], [attribute=value], [attribute~=value], [attribute|=value]等）相鄰兄弟選擇器（element + element）通用選擇器（*）
選擇器
1.類選擇器（.class）
是一種在CSS中用來為具有相同類名的元素添加樣式的選擇器。以下是類選擇器的使用教程：
????????在HTML中，為需要應用相同樣式的元素添加相同的類名。例如：
This is a paragraph with a highlight class.
This is a span with a highlight class.
????????在CSS中，使用類選擇器來為具有相同類名的元素添加樣式。例如：
.highlight {
color: red;
font-weight: bold;
}
????????在上面的例子中，所有具有highlight類名的元素（即兩個p和span元素）都會應用紅色文本和加粗樣式。
????????如果需要為不同的元素添加不同的樣式，可以為它們分別添加不同的類名，并在CSS中為這些類名定義不同的樣式。例如：
This is a paragraph with a highlight class.
This is a span with an underline class.
.highlight {
color: red;
font-weight: bold;
}
.underline {
text-decoration: underline;
}
????????類選擇器可以與其他選擇器結合使用，以實現(xiàn)更加靈活和精確的樣式設計。例如，可以使用后代選擇器、子元素選擇器等結合類選擇器來選擇特定的元素并添加樣式。
2.ID選擇器（#id）
ID選擇器（#id）是一種在CSS中用來為具有特定ID屬性的元素添加樣式的選擇器。以下是ID選擇器的使用教程：
在HTML中，為需要應用樣式的唯一元素添加一個唯一的ID屬性。例如：
在CSS中，使用ID選擇器來為具有特定ID屬性的元素添加樣式。例如：
#header {
background-color: lightblue;
color: white;
padding: 10px;
}
在上面的例子中，具有ID屬性為"header"的div元素會應用背景顏色為淺藍色、文字顏色為白色、內邊距為10px的樣式。
由于ID屬性應該是唯一的，因此一個頁面中只應該有一個具有特定ID屬性的元素。
ID選擇器具有更高的優(yōu)先級，因此它的樣式會覆蓋其他選擇器的樣式。因此，應該謹慎使用ID選擇器，避免過度使用，以免導致樣式的混亂和不易維護。
ID選擇器也可以與其他選擇器結合使用，以實現(xiàn)更加靈活和精確的樣式設計。例如，可以使用后代選擇器、子元素選擇器等結合ID選擇器來選擇特定的元素并添加樣式。
3.元素選擇器（element）
元素選擇器是CSS中最簡單的選擇器之一，它使用HTML元素的名稱來選擇元素。以下是一些關于元素選擇器的教程：
基本語法： 元素選擇器的基本語法非常簡單，只需要寫出元素的名稱即可。例如，要選擇所有段落元素，可以使用p作為選擇器。
示例代碼：
p {
color: red;
font-size: 16px;
}
上面的代碼表示選擇所有段落元素，并將它們的文字顏色設置為紅色，字體大小設置為16像素。
通用選擇器： 如果想選擇所有元素，可以使用通用選擇器*。例如，* { margin: 0; padding: 0; }表示將所有元素的外邊距和內邊距都設置為0。
嵌套選擇器： 元素選擇器可以與其他選擇器進行嵌套，以實現(xiàn)更精確的選擇。例如，.container p表示選擇類名為container的元素內部的所有段落元素。
多個元素選擇器： 可以同時選擇多個元素進行樣式設置。例如，h1, h2, h3 { font-weight: bold; }表示將所有
、和元素的文字加粗。
元素的文字加粗。
總的來說，元素選擇器是CSS中最基礎的選擇器之一，可以用來選擇HTML文檔中的各種元素，并為它們設置樣式。通過熟練掌握元素選擇器的用法，可以更好地控制頁面的外觀和布局。
4.后代選擇器（element element）
后代選擇器（element element）是一種在CSS中用來選擇某個元素的后代元素的選擇器。后代選擇器會選擇指定元素內部的所有后代元素，無論后代元素是多層嵌套的。以下是后代選擇器的使用教程：
在HTML中，可以有多層嵌套的元素結構，例如：
Title
This is a paragraph.
This is a nested paragraph.
在CSS中，使用后代選擇器來選擇指定元素的后代元素并添加樣式。例如，如果想要為容器元素內部所有段落元素添加樣式，可以這樣寫：
.container p {
color: blue;
}
在上面的例子中，所有在類名為"container"的元素內部的段落元素都會應用藍色文字顏色。
后代選擇器可以用來選擇特定層級結構內的元素，并為它們添加樣式，這樣可以實現(xiàn)更加靈活和精確的樣式控制。
后代選擇器是一種常用的選擇器，但要注意不要過度嵌套選擇器，以避免樣式的沖突和不易維護。建議盡量簡化選擇器的層級結構，保持代碼清晰易讀。
5.子元素選擇器（element > element）
子元素選擇器（element > element）用于選擇指定元素的直接子元素。只有直接子元素會被選中，而不會選擇孫子元素或其他后代元素。
例如，如果我們有以下HTML結構：
我們可以使用子元素選擇器來選擇直接子元素：
.parent > .child {
color: red;
}
這樣只有class為"child"的直接子元素會被選中，并設置文字顏色為紅色。
偽類選擇器（:hover, :first-child, :nth-child(n), :not(selector), :checked, :disabled等）
偽類選擇器是用來選擇元素的特殊狀態(tài)或位置的選擇器。這些偽類選擇器以冒號（:）開頭，并且可以用來為元素添加一些特殊樣式或行為。
一些常見的偽類選擇器包括：
:hover - 鼠標懸停時應用的樣式:first-child - 選擇父元素下的第一個子元素:nth-child(n) - 選擇父元素下第n個子元素:not(selector) - 排除指定選擇器的元素:checked - 選擇被選中的表單元素:disabled - 選擇被禁用的表單元素
例如，我們可以使用:hover偽類選擇器為鏈接元素添加懸停效果：
a:hover {
color: red;
}
我們也可以使用:nth-child(n)偽類選擇器來選擇父元素下的第n個子元素：
ul li:nth-child(odd) {
background-color: lightgrey;
}
這樣會選擇ul元素下的奇數(shù)位置的li元素，并設置背景顏色為淺灰色。
6.偽元素選擇器（::before, ::after, ::first-line, ::first-letter等）
偽元素選擇器用來在元素的內容之前或之后插入額外的內容，并且可以為這些額外的內容設置樣式。偽元素選擇器以雙冒號(::)開頭。
一些常見的偽元素選擇器包括：
::before - 在元素內容之前插入額外內容::after - 在元素內容之后插入額外內容::first-line - 選擇元素的第一行文本::first-letter - 選擇元素的第一個字母
例如，我們可以使用::before偽元素選擇器為元素的內容之前插入一個裝飾性的箭頭：
p::before {
content: "? ";
}
我們也可以使用::first-line偽元素選擇器來設置段落的第一行文本的樣式：
p::first-line {
font-weight: bold;
}
這樣會將段落的第一行文本加粗顯示。請注意，偽元素選擇器只能用于內容元素，而不能用于空元素或其他非內容元素。
7.偽元素選擇器（::before, ::after, ::first-line, ::first-letter等）
偽元素選擇器用于選擇文檔中不存在的特定元素而不是已經存在的元素。常見的偽元素選擇器包括：
::before：在元素內容之前插入內容。::after：在元素內容之后插入內容。::first-line：選擇元素的第一行文本。::first-letter：選擇元素的第一個字母。::selection：選擇用戶選擇的文本部分。::placeholder：選擇表單元素的占位符文本。::marker：選擇列表項的標記部分。
這些偽元素選擇器可以用來對文檔中的元素進行樣式設置或添加額外的內容，從而實現(xiàn)更靈活的設計效果。在使用偽元素選擇器時，需要注意不同瀏覽器對偽元素的支持程度可能會有所不同，建議在使用時進行兼容性測試。
7.偽元素選擇器（::before, ::after, ::first-line, ::first-letter等）
以下是關于常見的偽元素選擇器的簡要教程：
::before和::after：
::before和::after偽元素用于在元素內容的前面和后面插入內容。語法：element::before和element::after，其中element為要添加偽元素的元素。示例： p::before {
content: "Before text ";
}
p::after {
content: " After text";
}
::first-line：
::first-line偽元素用于選擇元素的第一行文本。語法：element::first-line，其中element為要選擇的元素。示例： p::first-line {
font-weight: bold;
}
::first-letter：
::first-letter偽元素用于選擇元素的第一個字母。語法：element::first-letter，其中element為要選擇的元素。示例： p::first-letter {
font-size: 2em;
}
以上是關于常見的偽元素選擇器的簡要介紹和示例。在實際應用中，可以根據(jù)需求使用不同的偽元素選擇器來實現(xiàn)特定的設計效果。更多關于偽元素選擇器的詳細用法和示例可以參考CSS官方文檔或其他CSS教程資源。
8.屬性選擇器（[attribute], [attribute=value], [attribute~=value], [attribute|=value]等）
屬性選擇器用于選擇具有特定屬性的元素。以下是關于常見屬性選擇器的簡要教程：
[attribute]：選擇具有指定屬性的元素。
語法：element[attribute]，其中element為要選擇的元素，attribute為要匹配的屬性名。示例： input[type] {
border: 1px solid red;
}
[attribute=value]：選擇具有指定屬性值的元素。
語法：element[attribute=value]，其中element為要選擇的元素，attribute為要匹配的屬性名，value為要匹配的屬性值。示例： a[] {
color: blue;
}
[attribute~=value]：選擇具有屬性值中包含指定詞匯的元素。
語法：element[attribute~=value]，其中element為要選擇的元素，attribute為要匹配的屬性名，value為要匹配的詞匯。示例： li[class~=active] {
font-weight: bold;
}
[attribute|=value]：選擇具有屬性值以指定值開頭或以指定值加連接符“-”開頭的元素。
語法：element[attribute|=value]，其中element為要選擇的元素，attribute為要匹配的屬性名，value為要匹配的值。示例： p[lang|="en"] {
color: blue;
}
以上是關于常見屬性選擇器的簡要介紹和示例。在實際應用中，可以根據(jù)需要使用不同的屬性選擇器來選擇特定的元素并對其應用樣式。更多關于屬性選擇器的詳細用法和示例可以參考CSS官方文檔或其他CSS教程資源。
9.相鄰兄弟選擇器（element + element）教程
相鄰兄弟選擇器（Adjacent Sibling Selector）用于選擇緊接在另一個元素之后的元素。語法為element1 + element2，其中element1是要選擇的元素，element2是緊接在element1后面的元素。
下面是一個簡單的示例，演示如何使用相鄰兄弟選擇器：
HTML代碼：
- Item 1
- Item 2
- Item 3
CSS代碼：
li + li {
margin-top: 10px;
}
在這個示例中，相鄰兄弟選擇器li + li選擇了緊接在前一個
使用相鄰兄弟選擇器可以方便地選擇特定位置的元素，并對其應用樣式。在實際應用中，可以根據(jù)需要靈活運用相鄰兄弟選擇器來實現(xiàn)特定的布局效果。更多關于相鄰兄弟選擇器的詳細用法和示例可以參考CSS官方文檔或其他CSS教程資源。
10.通用選擇器（*）教程
通用選擇器（Universal Selector）用于選擇文檔中的所有元素。通用選擇器的語法是*，表示選擇所有元素。
下面是一個簡單的示例，演示如何使用通用選擇器：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
在這個示例中，通用選擇器*選擇了文檔中的所有元素，并為它們設置了margin: 0;，padding: 0;和box-sizing: border-box;樣式。這樣可以確保所有元素都具有相同的盒模型樣式。
通用選擇器通常用于重置默認樣式或為所有元素設置通用樣式。但需要注意的是，過度使用通用選擇器可能會導致性能問題，因為它會匹配文檔中的所有元素，包括嵌套的元素，可能會增加瀏覽器的渲染負擔。
在實際應用中，建議謹慎使用通用選擇器，盡量避免過度使用，以免影響頁面性能。更多關于通用選擇器的詳細用法和示例可以參考CSS官方文檔或其他CSS教程資源。
柚子快報邀請碼778899分享：css常用選擇器（一）
好文鏈接
本文內容根據(jù)網絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉載請注明，如有侵權，聯(lián)系刪除。
Naver出海導航坊
