CSS中常見選擇器的介紹與使用

發(fā)布時間：2023-12-19 14:11:48 作者：慕仲卿

CSS選擇器是CSS的基石，賦予開發(fā)者精確控制HTML文檔中元素樣式的能力,這篇文章主要為大家詳細介紹了常見的一些CSS選擇器并提供示例代碼，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

CSS選擇器是CSS的基石，賦予開發(fā)者精確控制HTML文檔中元素樣式的能力。選擇器定義了CSS規(guī)則集將應(yīng)用到HTML文檔的哪一部分，通過不同類型的選擇器，可以根據(jù)元素的tag、ID、class、屬性、狀態(tài)等各種條件來應(yīng)用樣式。本文將詳細介紹各種CSS選擇器并提供示例代碼。

類型選擇器（標簽選擇器）

類型選擇器，也稱為標簽選擇器，根據(jù)HTML元素的名稱來選取元素。

/* 所有的段落都會被應(yīng)用樣式 */
p {
  color: blue;
}

id選擇器

通過元素的ID屬性選擇特定的HTML元素。ID在HTML文檔中是唯一的。

/* 應(yīng)用于ID為"header"的元素 */
#header {
  background-color: navy;
}

類選擇器

類選擇器通過HTML元素的class屬性選取元素，一個class可以被多個元素共享。

/* 所有帶有"class-name"類的元素 */
.class-name {
  font-weight: bold;
}

后代選擇器

后代選擇器（也稱為上下文選擇器）用于選取某個元素的后代元素。

/* 選擇<div>內(nèi)的所有<span> */
div span {
  color: red;
}

子選擇器

子選擇器僅選擇直接子元素。

/* 只選擇<div>元素的直接子元素<ul> */
div > ul {
  list-style-type: none;
}

相鄰?fù)呥x擇器

相鄰?fù)呥x擇器選取緊隨其后的相鄰?fù)呍亍?/p>

/* 選擇<p>元素之后的第一個<h2>元素 */
p + h2 {
  margin-top: 0;
}

一般同輩選擇器

一般同輩選擇器用于選取某元素之后的所有具有相同父元素的同輩元素。

/* 選擇<h2>元素之后所有兄弟元素<h2> */
h2 ~ h2 {
  border-top: 1px solid gray;
}

通用選擇器

通用選擇器是一個通配符，匹配文檔中的所有元素。

/* 頁面中所有元素都將有黃色背景 */
* {
  background: yellow;
}

屬性選擇器

屬性選擇器根據(jù)元素的屬性及其值來選擇元素。

/* 選擇含有"target"屬性的HTML元素 */
[target] {
  border: 1px solid black;
}
/* 選擇"target"屬性等于"_blank"的HTML元素 */
[target="_blank"] {
  background-color: silver;
}

屬性選擇器與特殊字符

CSS還提供了特定的字符，供屬性選擇器使用，用于更加細致的條件匹配。

/* 選擇具有以"btn-"開頭的class屬性值的元素 */
[class^="btn-"] {
  padding: 5px 10px;
}
/* 選擇具有以"-btn"結(jié)尾的class屬性值的元素 */
[class$="-btn"] {
  font-weight: bold;
}
/* 選擇class屬性值含有"btn-"的任何地方的元素 */
[class*="btn-"] {
  font-size: 1.2em;
}

偽元素選擇器

偽元素選擇器用于樣式化元素的特定部分或生成的內(nèi)容。

::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;
}

結(jié)構(gòu)化偽類選擇器

結(jié)構(gòu)化偽類選擇器允許基于文檔結(jié)構(gòu)選擇元素。

: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;
}
/* 選擇倒數(shù)第二個<p>類型的元素 */
p:nth-last-of-type(2) {
  background-color: lightgray;
}

偽類表單選擇器

CSS為表單提供了一組偽類選擇器，用于根據(jù)不同的狀態(tài)來設(shè)置樣式。

: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選擇器幾乎可以無限制地控制頁面樣式。了解并掌握它們，將使設(shè)計者能夠有效地操作DOM結(jié)構(gòu)，帶來更豐富的表現(xiàn)力和互動性。隨著CSS規(guī)范的不斷發(fā)展，選擇器的種類和功能也在不斷擴展，進一步增強了開發(fā)者描述和實現(xiàn)復(fù)雜設(shè)計的能力。

以上就是CSS中常見選擇器的介紹與使用的詳細內(nèi)容，更多關(guān)于CSS選擇器的資料請關(guān)注腳本之家其它相關(guān)文章！

Tag：css 選擇器

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片