html之css選擇器學(xué)習(xí)

番茄西紅柿發(fā)布于2019-04-23 13:46 / 3470人閱讀

什么是css選擇器：

介紹：

css可以設(shè)置標(biāo)簽的樣式，為了更好的設(shè)置樣式以及為了方便給某些標(biāo)簽指定樣式（批量的給某些標(biāo)簽增加樣式），所以有了css選擇器，css選擇器可以篩選出指定的標(biāo)簽。篩選出來之后就可以給對(duì)應(yīng)的標(biāo)簽設(shè)置樣式。

css選擇器的語(yǔ)法：

css選擇器的定義由兩部分組成：一個(gè)是選擇器，一個(gè)是樣式定義，比如：

標(biāo)簽選擇器

介紹：

標(biāo)簽選擇器直接根據(jù)標(biāo)簽名來選擇標(biāo)簽，比如想篩選出所有div標(biāo)簽，可以使用

示例：

{:;:;
} {:;:;}{:; }{:;:;
}

補(bǔ)充：

*代表所有標(biāo)簽，可以使用*{}來選擇出所有標(biāo)簽。

類選擇器：

介紹：

類class是標(biāo)簽的一個(gè)屬性，類選擇器選擇所有標(biāo)簽中class的屬性值等于類選擇器指定的屬性的所有標(biāo)簽（注意，類的屬性值可以在多個(gè)標(biāo)簽中相同）。比如

語(yǔ)法：

類選擇器以一個(gè)點(diǎn)號(hào)代表。點(diǎn)號(hào)后面跟對(duì)應(yīng)的class中含有的屬性值，即可選擇出含有指定class屬性值的標(biāo)簽。

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>.center{/* 樣式定義*/text-align: center;}.normal{font-weight:normal;}style>head><body>  <h1 class=center normal>類選擇器h1>  <div class="center">div>body>html>

補(bǔ)充：

class中的屬性值可以有多個(gè)，使用空格分隔，類選擇器可以只針對(duì)其中一個(gè)屬性值。

id選擇器

介紹：

與類選擇器功能類似，不過選擇的屬性是id，選擇出id的屬性值與id選擇器相同的標(biāo)簽（理論上id的屬性是唯一的，不同標(biāo)簽的id屬性值應(yīng)該不同）

語(yǔ)法：

使用#來進(jìn)行id選擇，#后面跟著id屬性值,比如：

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#header{/* 樣式定義*/background-color: orange;width: 960px;height: 100px;margin:0 auto;}style>head><body>  <div id="header">div>body>html>

補(bǔ)充：

注意，id的屬性值應(yīng)該是唯一，所以id選擇器只用來選擇出某個(gè)標(biāo)簽。

并集選擇器（分組選擇器）

介紹：

并集選擇器（分組選擇器）由多個(gè)選擇器組成，是將指定的多個(gè)選擇器都定義同樣的樣式。多個(gè)選擇器的關(guān)系是并立的，相當(dāng)于在原本多帶帶定義的基礎(chǔ)上合并定義。

語(yǔ)法：

使用,來分隔多個(gè)選擇器，比如相當(dāng)于，所以明顯的并集選擇器可以節(jié)省不少代碼。

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#header,#footer{width: 960px;margin:0 auto;}#header{background-color: orange;height: 100px;}#footer{background-color: skyblue;height: 500px;}h1,h2,h3{color: green;margin:0;}style>head><body>  <div id="header">div>  <div id="footer">  <h1>百度h1>  div>body>html>

交集選擇器：

介紹：

交集選擇器由多個(gè)選擇器組成，只有同時(shí)符合多個(gè)選擇器的標(biāo)簽才會(huì)被選擇出來。

語(yǔ)法：

多個(gè)選擇器直接沒有間隔，直接拼接起來。比如

示例：

DOCTYPE html><html><head><meta charset="UTF-8" /><title>Documenttitle><style >div.a{ /* 選擇div標(biāo)簽中class=a的 */background-color: blue;}style>head><body><div class=a>1div> <div >2div><div><p class=a>123p> div>body>html>

補(bǔ)充：

要注意與下面的后代選擇器的區(qū)別

后代選擇器：

介紹：

后代選擇器由多個(gè)選擇器組成，后面的選擇器選擇范圍基于前面的選擇器。比如
后代選擇器可以選擇出子標(biāo)簽，也可以選擇出孫子標(biāo)簽，孫孫子標(biāo)簽?？傊?，它可以選擇出它的后代。只要符合條件的后代就能被選擇出來。

語(yǔ)法：

后代選擇器中多個(gè)選擇器用空格隔開。

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#header h1{ /* 選擇id為header的標(biāo)簽的后代中的h1標(biāo)簽 */color: green;}div .blue{/* 選擇div標(biāo)簽的后代中class為blue的標(biāo)簽 */color:blue;}style>head><body>  <div id="header"><h1>header的標(biāo)簽下的h1標(biāo)簽h1>  div>  <div class="blue">  這是一個(gè)class=blue的div標(biāo)簽    div>  <div >  <h1 class="blue">div下面的class=blue的標(biāo)簽h1>  div>body>html>

補(bǔ)充：

后代選擇器顧名思義，它只會(huì)在后代中查找

子標(biāo)簽選擇器：

介紹：

同樣由多個(gè)選擇器組成，與后代選擇器不同的是它只會(huì)選擇直接子代，不會(huì)選擇出孫子標(biāo)簽之類的非子標(biāo)簽。

語(yǔ)法：

子標(biāo)簽選擇器比后代選擇器多出一個(gè)>來標(biāo)注只選擇子標(biāo)簽。比如

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>#footer > .blue{color:blue;}style>head><body><div id="footer" ><h1 class="blue">id="footer"下面的子標(biāo)簽h1><div><span class="blue">id="footer"下面的非子標(biāo)簽span>div>div>body>html>

屬性選擇器：

介紹：

屬性選擇器是根據(jù)屬性選擇出指定標(biāo)簽

語(yǔ)法：

屬性選擇器使用[]來包裹屬性

僅針對(duì)屬性時(shí)：[屬性名]{} 比如
針對(duì)屬性跟屬性值時(shí)：
- 對(duì)應(yīng)屬性等于指定值：[屬性名=屬性值]{}
- 對(duì)應(yīng)屬性包含指定值（有些屬性可以包含多個(gè)屬性值，這個(gè)包含是指可以等于其中一個(gè)屬性值）:[屬性名~=屬性值]
- 以指定值開頭的屬性值(CSS3支持)：[屬性值^=指定值]{}
- 以指定值結(jié)尾的屬性值(CSS3支持)：[屬性值$=指定值]{}
- 屬性值字符串包含指定值的(CSS3支持)：[屬性值*=指定值]{}

示例：

DOCTYPE html><html><head><meta charset="utf-8"><title>title><style>[type]{ /* 選中包含type 屬性的標(biāo)簽 */border:1px solid red;}[type="text"]{ /* 選中type屬性="text"的標(biāo)簽 */color:green;}[class~="t1"]{ /* 選中class屬性包含t1的標(biāo)簽 */ color:blue;}[name^="user"]{ /* 選中name屬性以u(píng)ser開頭的標(biāo)簽 */ background-color: pink;}[name*="amy"]{ /* 選中name屬性字符串包含amy的標(biāo)簽 */background-color: purple;}style>head><body><div><input type="text" ><input type="password" class="t1"><input type="text" name="username"><input type="text" name="AamyB">div>body>html>

相鄰兄弟選擇器：

GPU云服務(wù)器 云服務(wù)器 css選擇器 基礎(chǔ)選擇器css html::選擇器 html選擇器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2313.html

上一篇：CSS之表格邊框合并、兄弟標(biāo)簽外邊距合并、父子標(biāo)簽的外邊距合并

下一篇：用HTML編寫阿里云

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 769·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 4021·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3855·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3909·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3838·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3949·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3613·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6310·2021-11-29 11:00

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

html之css選擇器學(xué)習(xí)

相關(guān)內(nèi)容：

什么是css選擇器：

介紹：

css選擇器的語(yǔ)法：

標(biāo)簽選擇器

介紹：

示例：

補(bǔ)充：

類選擇器：

介紹：

語(yǔ)法：

示例：

補(bǔ)充：

id選擇器

介紹：

語(yǔ)法：

示例：

補(bǔ)充：

并集選擇器（分組選擇器）

介紹：

語(yǔ)法：

示例：

交集選擇器：

介紹：

語(yǔ)法：

示例：

補(bǔ)充：

后代選擇器：

介紹：

語(yǔ)法：

示例：

補(bǔ)充：

子標(biāo)簽選擇器：

介紹：

語(yǔ)法：

示例：

屬性選擇器：

介紹：

語(yǔ)法：

示例：

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！