新聞中心

我們提供的服務(wù)有:成都網(wǎng)站設(shè)計、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、河北ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的河北網(wǎng)站制作公司
本節(jié)我們來介紹一下 CSS 中幾種常用選擇器的定義方式:
1. 通用選擇器
通用選擇器用星號
*表示,它不匹配某個特定的 HTML 元素,而是匹配 HTML 文檔中的每個元素。在開發(fā)中,我們通常使用通用選擇器來清除 HTML 元素中默認的內(nèi)外邊距,如下所示:
* {
margin: 0 auto;
padding: 0;
}
注意:雖然通用選擇器內(nèi)的樣式規(guī)則能夠應(yīng)用于 HTML 文檔中的每個元素,但并不建議在生產(chǎn)環(huán)境中過于頻繁地使用通用選擇器。正是因為通用選擇器會匹配網(wǎng)頁上每個元素的特點,頻繁的使用會給瀏覽器帶來太多不必要的壓力。
2. 標(biāo)簽選擇器
一個完整的 HTML 文檔由各式各樣的標(biāo)簽組成,而標(biāo)簽選擇器可以通過具體的標(biāo)簽名稱來匹配文檔內(nèi)所有同名的標(biāo)簽,如下所示:
p {
color: blue;
}
p 選擇器能夠匹配文檔中所有的
標(biāo)簽。
3. ID 選擇器
ID 選擇器用來匹配 HTML 文檔中具有指定 ID 屬性的標(biāo)簽,ID 選擇器的定義需要用到井號
#,后面緊跟 ID 屬性的值,如下所示:
#nav {
color: red;
}
#nav 選擇器能夠匹配文檔中具有
id="nav" 屬性的標(biāo)簽。
4. 類選擇器
類選擇器可以根據(jù)標(biāo)簽的 class 屬性匹配具體的 HTML 標(biāo)簽,所有符合條件的標(biāo)簽都會根據(jù)選擇器內(nèi)的樣式進行格式化。類選擇器的定義需要用到一個英文的句號
.,后面緊跟 class 屬性的值,如下所示:
.black {
color: black;
}
.black 選擇器能夠匹配文檔中所有具有
class="black" 屬性的標(biāo)簽。
由于 class 屬性不是唯一的,可以應(yīng)用于不同的標(biāo)簽,因此您還可以在定義類選擇器時指定具體的標(biāo)簽,如下所示:
p.black {
color: black;
}
p.black 選擇器僅會將其中的樣式應(yīng)用到所有具有
class="black" 屬性的
標(biāo)簽中,對于其它的具有
class="black" 屬性的標(biāo)簽則沒有影響。
另外,一個 HTML 標(biāo)簽中 class 屬性可能不止一個,例如:
假如我們要為所有 class 屬性包含 info 的元素設(shè)置粗體,為所有 class 屬性包含 selected 的元素設(shè)置紅色字體,為 class 屬性中既包含 info 又包含 selected 的元素設(shè)置藍色背景,則可以寫成下面這樣:
.info {
font-weight:bold;
}
.selected {
color: red;
}
.info.selected {
background: blue;
}
這種由多個 class 屬性值所組成的類選擇器我們可以稱之為“多類選擇器”,而前面介紹的由單個 class 屬性值定義的類選擇器可以稱為“單類選擇器”。
注意:多類選擇器中,多個 class 屬性之間是緊挨著的(例如 .info.selected),不需要使用空格分開。
5. 后代選擇器
當(dāng)一個 子選擇器與后代選擇器類似,不過子選擇器只會匹配某個元素的直接后代(元素與其子元素之間只有一層嵌套關(guān)系),子選擇器由兩個或多個選擇器組成,選擇器之間用大于號 歡迎訪問編程幫! 編程幫(biancheng.net),一個在線學(xué)習(xí)編程的網(wǎng)站,專注于分享優(yōu)質(zhì)編程教程。 相鄰兄弟選擇器用于匹配某個元素之后緊鄰的另一個元素,這兩個元素擁有同一個父級元素并且不存在嵌套關(guān)系。相鄰兄弟選擇器的定義需要用到加號 通用兄弟選擇器與相鄰兄弟選擇器非常相似,但卻沒有那么嚴格。通用兄弟選擇器同樣會匹配同一父級元素下的兄弟元素,但兄弟元素之間無需緊鄰。定義通用兄弟選擇器需要用到波浪號 分組選擇器可以將同樣的樣式規(guī)則應(yīng)用到多個選擇器中,每個選擇器之間使用逗號 我們可以看到選擇器 屬性選擇器用來匹配具有特定屬性的元素。屬性選擇器的定義方式與標(biāo)簽選擇器相似,只不過需要在標(biāo)簽的后面使用方括號 屬性選擇器中方括號
標(biāo)簽嵌套在一個
標(biāo)簽看作是
ul li a {
text-decoration: none;
}
ul li a 選擇器僅會匹配無序列表
標(biāo)簽的所有后代
標(biāo)簽。
6. 子選擇器
>分隔開,如下所示:
p > strong {
color:red;
}
p > strong 選擇器會將下面代碼中第一個
標(biāo)簽的子標(biāo)簽
內(nèi)的文字設(shè)置為紅色,但對第二個
標(biāo)簽中的
標(biāo)簽則沒有影響。
7. 相鄰兄弟選擇器
+,加號兩邊為相鄰的兩個元素,選擇器會匹配加號后面的元素,如下所示:
h1 + p {
color: blue;
font-size: 18px;
}
ul.task + p {
color: #f0f;
text-indent: 30px;
}
h1 + p 選擇器會匹配同一父級元素下緊鄰
標(biāo)簽并在其后的
標(biāo)簽。
ul.task + p 選擇器則會匹配同一父級元素下緊鄰
標(biāo)簽并在其后的
標(biāo)簽,但
要具有
class="task" 屬性。
8. 通用兄弟選擇器
~,波浪號兩邊為同一父級元素下的兩個元素,選擇器會匹配波浪號后面的元素,如下所示:
h1 ~ p {
color: blue;
font-size: 18px;
}
h1 ~ p 選擇器會匹配同一父級元素下
標(biāo)簽之后的所用
標(biāo)簽。
9. 分組選擇器
,進行分隔,這么做可以避免定義重復(fù)的樣式規(guī)則,最大程度地減少 CSS 樣式表中的代碼。例如,在 CSS 樣式表中,不同的選擇器中可能包含同樣的樣式規(guī)則,如下所示:
h1 {
font-size: 36px;
font-weight: normal;
}
h2 {
font-size: 28px;
font-weight: normal;
}
h3 {
font-size: 22px;
font-weight: normal;
}
h1、
h2、
h3 中包含相同的樣式
font-weight: normal;,這時就可以先使用分組選擇器為
h1、
h2、
h3 定義它們之間同樣的樣式規(guī)則,然后再分別定義它們之間不同的樣式規(guī)則,如下所示:
h1, h2, h3 {
font-weight: normal;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
10. 屬性選擇器
[ ]來指定標(biāo)簽具有的屬性信息,如下所示:
input[type="text"] {
color: blue;
}
input[type="text"] 選擇器會匹配所有具有
type="text" 屬性的
標(biāo)簽。
[ ]內(nèi)的屬性信息還支持以下幾種寫法:
target 屬性元素; target="_blank" 屬性的元素; title 屬性包含單詞“flower”的所有元素; lang 屬性正好是“en”或以“en”為開頭的所有元素。
網(wǎng)頁題目:CSS選擇器
當(dāng)前路徑:http://fisionsoft.com.cn/article/cocccdj.html


咨詢
建站咨詢
