目錄 前言 一、CSS選擇器 （一）標(biāo)簽選擇器 （二）id選擇器 （三）類別選擇器 二、針對標(biāo)簽的選擇器嵌套 三、集體聲明和全局聲明 結(jié)語
前言
CSS代碼由選擇器和一條或多條聲明組成的，選擇器是需要改變樣式的 HTML標(biāo)簽，在CSS中由分號隔開每條代碼為聲明，且聲明是以大括號{}括起來的。
之前我們闡述了CSS的基本概念，其中選擇器是需要改變樣式的 HTML標(biāo)簽，然而選擇器分為三種：標(biāo)簽選擇器、id選擇器、class選擇器，它們的作用都是設(shè)置CSS樣式。
一、CSS選擇器
（一）標(biāo)簽選擇器
標(biāo)簽選擇器對HTML中的標(biāo)簽設(shè)計樣式。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > h2 { color : red; font-size : 25px; } p { color : blue; font-size : 15px; } </ style> </ head> < body> < h2> CSS
</ h2> < p> 層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> < p> CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
</ p> </ body> </ html> 運行結(jié)果如下：
（二）id選擇器
id選擇器，可以通過在CSS 使用"#“對特定 id 的 HTML標(biāo)簽設(shè)計特定的樣式 ，即可對html中多個標(biāo)簽進(jìn)行不同的CSS樣式設(shè)置。若不使用”#"，則表示作用于當(dāng)前html代碼中所有該類型標(biāo)簽進(jìn)行樣式設(shè)置。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > #style1 { color : red; font-size : 15px; } #style2 { color : blue; font-size : 15px; } </ style> </ head> < body> < pid = " style1" > 層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> < pid = " style2" > CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
</ p> </ body> </ html> 運行結(jié)果如下：
（三）類別選擇器
類別選擇器（class選擇器），即用于對一組標(biāo)簽的樣式設(shè)計，它可作用于多個標(biāo)簽且多次使用，通過設(shè)置html中標(biāo)簽的class屬性，然后在CSS中使用“.”進(jìn)行引用。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > h2.other { text-align : center; } .red { color : red; font-size : 10px; } .blue { color : blue; font-size : 15px; } </ style> </ head> < body> < h2> 以下是CSS的介紹：
</ h2> < h2class = " other red" > CSS
</ h2> < pclass = " red" > 層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> < pclass = " blue" > CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。
</ p> < pclass = " blue" > CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
</ p> </ body> </ html> 運行結(jié)果如下：
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > .red { color : red; font-size : 20px; } #style { color : blue; font-size : 20px; } </ style> </ head> < body> < h2> 以下是CSS的介紹：
</ h2> < h2class = " red" > CSS
</ h2> < pid = " red" class = " red" > 層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> </ body> </ html> 二、針對標(biāo)簽的選擇器嵌套
當(dāng)要對html標(biāo)簽中嵌套的標(biāo)簽進(jìn)行樣式設(shè)計時，在CSS代碼中通過標(biāo)簽 嵌套的標(biāo)簽{ }兩個選擇器來表示，標(biāo)簽和嵌套的標(biāo)簽中用空格隔開。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > p span { color : red; font-size : 18px; } </ style> </ head> < body> < h2> CSS
</ h2> < p> < span> 層疊樣式表
</ span> 是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> </ body> </ html> 運行結(jié)果如下：
三、集體聲明和全局聲明
（一）集體聲明
在CSS代碼中通過","對多個選擇器間隔，即可對多個html標(biāo)簽進(jìn)行集體聲明。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > h2,p { color : red; font-size : 18px; } </ style> </ head> < body> < h2> CSS
</ h2> < p> < span> 層疊樣式表
</ span> 是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> </ body> </ html> 運行結(jié)果如下：
（二）全局聲明
在CSS代碼中通過"*"對所有html標(biāo)簽進(jìn)行統(tǒng)一的樣式設(shè)計，即為全局聲明。
<! DOCTYPE html > < html> < head> < metacharset = " utf-8" > < title> </ title> < styletype = " text/css" > * { color : orangered; font-size : 18px; } </ style> </ head> < body> < h2> CSS
</ h2> < p> 層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。
</ p> < p> CSS 能夠?qū)W(wǎng)頁中元素位置的排版進(jìn)行像素級精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力。
</ p> </ body> </ html> 運行結(jié)果如下：
結(jié)語
以上就是全部內(nèi)容，篇幅較長，感謝您的閱讀和支持，若有表述或代碼中有不當(dāng)之處，望指出！您的指出和建議能給作者帶來很大的動力！！！
總結(jié)
以上是生活随笔 為你收集整理的Web前端开发笔记——第三章 CSS语言 第二节 CSS选择器 的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔 推薦給好友。
