CSS中常見選擇器的介紹與使用
我要評論CSS選擇器是CSS的基石，賦予開發(fā)者精確控制HTML文檔中元素樣式的能力。選擇器定義了CSS規(guī)則集將應用到HTML文檔的哪一部分，通過不同類型的選擇器，可以根據元素的tag、ID、class、屬性、狀態(tài)等各種條件來應用樣式。本文將詳細介紹各種CSS選擇器并提供示例代碼。
類型選擇器（標簽選擇器）
類型選擇器，也稱為標簽選擇器，根據HTML元素的名稱來選取元素。
/* 所有的段落都會被應用樣式 */
p {
color: blue;
}id選擇器
通過元素的ID屬性選擇特定的HTML元素。ID在HTML文檔中是唯一的。
/* 應用于ID為"header"的元素 */
#header {
background-color: navy;
}類選擇器
類選擇器通過HTML元素的class屬性選取元素，一個class可以被多個元素共享。
/* 所有帶有"class-name"類的元素 */
.class-name {
font-weight: bold;
}后代選擇器
后代選擇器（也稱為上下文選擇器）用于選取某個元素的后代元素。
/* 選擇<div>內的所有<span> */
div span {
color: red;
}子選擇器
子選擇器僅選擇直接子元素。
/* 只選擇<div>元素的直接子元素<ul> */
div > ul {
list-style-type: none;
}相鄰同輩選擇器
相鄰同輩選擇器選取緊隨其后的相鄰同輩元素。
/* 選擇<p>元素之后的第一個<h2>元素 */
p + h2 {
margin-top: 0;
}一般同輩選擇器
一般同輩選擇器用于選取某元素之后的所有具有相同父元素的同輩元素。
/* 選擇<h2>元素之后所有兄弟元素<h2> */
h2 ~ h2 {
border-top: 1px solid gray;
}通用選擇器
通用選擇器是一個通配符，匹配文檔中的所有元素。
/* 頁面中所有元素都將有黃色背景 */
* {
background: yellow;
}屬性選擇器
屬性選擇器根據元素的屬性及其值來選擇元素。
/* 選擇含有"target"屬性的HTML元素 */
[target] {
border: 1px solid black;
}
/* 選擇"target"屬性等于"_blank"的HTML元素 */
[target="_blank"] {
background-color: silver;
}屬性選擇器與特殊字符
CSS還提供了特定的字符，供屬性選擇器使用，用于更加細致的條件匹配。
/* 選擇具有以"btn-"開頭的class屬性值的元素 */
[class^="btn-"] {
padding: 5px 10px;
}
/* 選擇具有以"-btn"結尾的class屬性值的元素 */
[class$="-btn"] {
font-weight: bold;
}
/* 選擇class屬性值含有"btn-"的任何地方的元素 */
[class*="btn-"] {
font-size: 1.2em;
}偽元素選擇器
偽元素選擇器用于樣式化元素的特定部分或生成的內容。
::first-letter 和 ::first-line
p::first-letter {
font-size: 200%;
color: #8A2BE2;
}
p::first-line {
font-variant: small-caps;
}::before 和 ::after
h1::before {
content: "Welcome ";
color: green;
}
h1::after {
content: "!";
color: red;
}偽類選擇器
偽類選擇器用于定義元素的特殊狀態(tài)。
:link、:visited、:hover、:focus、:active
a:link {
color: #FF0000;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FF00FF;
}
a:focus {
border: 1px dashed #0000FF;
}
a:active {
color: #0000FF;
}:target 和 :not()
:target {
background-color: #f9f9f9;
}
:not(.highlighted) {
background-color: #ffff00;
}結構化偽類選擇器
結構化偽類選擇器允許基于文檔結構選擇元素。
:nth-child 和 :nth-last-child
li:nth-child(odd) {
color: red;
}
li:nth-child(even) {
color: blue;
}
/* 從末尾開始的第二個子元素 */
li:nth-last-child(2) {
font-size: 1.5em;
}:nth-of-type 和 :nth-last-of-type
/* 選擇第一個<p>類型的元素 */
p:nth-of-type(1) {
font-weight: bold;
}
/* 選擇倒數第二個<p>類型的元素 */
p:nth-last-of-type(2) {
background-color: lightgray;
}偽類表單選擇器
CSS為表單提供了一組偽類選擇器，用于根據不同的狀態(tài)來設置樣式。
:required、:valid、:invalid、:optional、:in-range 和 :out-of-range
input:required {
border: 1px solid red;
}
input:valid {
border: 1px solid green;
}
input:invalid {
background-color: #ffdddd;
}
input:optional {
opacity: 0.75;
}
input:in-range {
border-color: blue;
}
input:out-of-range {
border-color: orange;
}:read-only 和 :read-write
input:read-only {
background-color: #eeeeee;
}
input:read-write {
background-color: #fff;
}通過精確選擇元素，CSS選擇器幾乎可以無限制地控制頁面樣式。了解并掌握它們，將使設計者能夠有效地操作DOM結構，帶來更豐富的表現力和互動性。隨著CSS規(guī)范的不斷發(fā)展，選擇器的種類和功能也在不斷擴展，進一步增強了開發(fā)者描述和實現復雜設計的能力。
以上就是CSS中常見選擇器的介紹與使用的詳細內容，更多關于CSS選擇器的資料請關注腳本之家其它相關文章！
相關文章
- 這篇文章主要介紹了CSS復合選擇器的具體使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2021-02-23
- 這篇文章主要介紹了一文教你玩轉CSS 組合選擇器,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-20
這篇文章主要介紹了CSS 中的六個重要選擇器(三秒就可以記住),本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-27
這篇文章主要介紹了CSS選擇器中的正則表達式使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學2020-03-11
這篇文章主要介紹了巧用CSS屬性值正則匹配選擇器,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-03-11
CSS 選擇器在實踐中是非常常用的，無論是在寫樣式上或是在 JS 中選擇 DOM 元素都需要用到。在 CSS Selectors Level 4 中，工作組繼續(xù)為選擇器標準添加了更豐富的選擇器。需2018-12-24- 這篇文章主要介紹了css選擇器設置標簽樣式的實例代碼,需要的朋友可以參考下2018-11-22
- CSS屬性選擇器非常神奇，它們可以幫你避免添加數不勝數的類名，從另一方面來指出你代碼里的一些問題。接下來通過本文給大家介紹使用CSS屬性選擇器來拼接HTML的DNA的方法，2018-11-02
- 這篇文章主要介紹了CSS 選擇器的相關知識，本文通過實例代碼給大家介紹的非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-16
- 本文將詳細介紹CSS選擇器的新用法，感興趣的朋友一起學習吧2018-02-02
