柚子快報(bào)邀請碼778899分享：前端 第四章 初識CSS3

http://yzkb.51969.com/

文章目錄

第四章 初識CSS31.CSS的基本語法2.HTML中引入CSS樣式3.基本選擇器4.高級選擇器4.1層次選擇器4.2結(jié)構(gòu)偽類選擇器4.3屬性選擇器

第四章 初識CSS3

1.CSS的基本語法

選擇器{ 聲明2；

? 聲明(屬性：值)1;

? }；

style標(biāo)簽

2.HTML中引入CSS樣式

行內(nèi)樣式（使用style屬性引入CSS樣式）

style屬性的應(yīng)用

直接在HTML標(biāo)簽中設(shè)置的樣式

內(nèi)部樣式表(CSS代碼寫在的

外部樣式表(CSS代碼保存在擴(kuò)展名為.css的樣式表中)

鏈接外部樣式表(使用鏈接的CSS文件先加載到網(wǎng)頁當(dāng)中，再進(jìn)行編譯顯示)

導(dǎo)入外部鏈接表(使用@import導(dǎo)入的CSS文件，客戶端顯示HTML結(jié)構(gòu)，再把CSS文件加載到網(wǎng)頁當(dāng)中)

CSS樣式優(yōu)先級: 就近原則

3.基本選擇器

全局選擇器 使用*號，選擇所有標(biāo)簽 標(biāo)簽選擇器（直接應(yīng)用于HTML標(biāo)簽） HTML標(biāo)簽作為標(biāo)簽選擇器的名稱

…

、

、 類選擇器（可在頁面中多次使用） .類名稱{屬性:值;} <標(biāo)簽名 class= “類名稱”>標(biāo)簽內(nèi)容 ID選擇器（在同一個(gè)頁面中只能使用一次） #id { 屬性:值;} 交集選擇器、并集選擇器 使用,隔開 基本選擇器的優(yōu)先級 ID選擇器>類選擇器>標(biāo)簽選擇器

4.高級選擇器

4.1層次選擇器

后代選擇器（后代選擇器兩個(gè)選擇符之間必須要以空格隔開，中間不能有任何其他的符號插入） body p{ background: red; }：body下所有p元素都為紅色 子選擇器 body>p{ background: pink; }:只有子元素為粉色 相鄰兄弟選擇器 .active+p { background: green; }:緊鄰的p元素為綠色，本身不變 通用兄弟選擇器 .active~p{ background: yellow; }:active后所有兄弟p元素為黃色，本身不變

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

li:first-child（ul下第一個(gè)元素是li） li:first-child{

color:red;

}

• 163/126/yeah三大免費(fèi)郵箱均默認(rèn)開放
• 全面支持iPhone/iPad及Android等系統(tǒng)
• 客戶端、手機(jī)與網(wǎng)頁，實(shí)現(xiàn)發(fā)送、閱讀郵件

li:first-of-type（ul下第一個(gè)類型是li的元素） li:first-of-type{

color:red;

}

jddodfj

• 163/126/yeah三大免費(fèi)郵箱均默認(rèn)開放
• 全面支持iPhone/iPad及Android等系統(tǒng)
• 客戶端、手機(jī)與網(wǎng)頁，實(shí)現(xiàn)發(fā)送、閱讀郵件

4.3屬性選擇器

a[id]（含有id屬性的a元素） a[id] { background: yellow; }

a[id=first]（a元素中有“id=first”相同的屬性） a[id=first] { background: red; }

a[class*=links]（class 屬性中屬性值包含links） a[class*=links] { background: red; }

a[href^=http]（href屬性值中以http開頭的） a[href^=http] { background: red; }

a[href$=png]（href屬性值中以png結(jié)尾的） a[href$=png] { background: red; }

柚子快報(bào)邀請碼778899分享：前端 第四章 初識CSS3

http://yzkb.51969.com/

好文鏈接

評論可見，查看隱藏內(nèi)容