CSS中的基礎(chǔ)選擇器有哪些

本篇內(nèi)容介紹了“CSS中的基礎(chǔ)選擇器有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

        CSS（層疊樣式表）是一種用于頁(yè)面內(nèi)渲染 HTML，XML 等的一種基礎(chǔ)語(yǔ)言，而選擇器更是學(xué)習(xí) CSS 的重中之重，選擇器能對(duì)相應(yīng)的元素進(jìn)行選擇，從而開始添加我們想要的樣式，選擇器可以進(jìn)行單個(gè)元素或多個(gè)元素的渲染效果，用合適的選擇器能事半功倍，大大節(jié)省編輯時(shí)間。 

五大基礎(chǔ)選擇器

1.通配符選擇器

通配符選擇器可以選擇頁(yè)面上的所有元素，并對(duì)他們應(yīng)用想要的樣式，用 * 來(lái)表示。但不建議使用，IE6不支持，給大型網(wǎng)站增加負(fù)擔(dān)。

語(yǔ)法：* {屬性：值}

* { color : red ; }  <!--頁(yè)面中的元素都會(huì)變紅色-->
* { font-size : 30px ; }  <!--頁(yè)面中的字體都會(huì)變成30px-->

2.標(biāo)簽選擇器（元素選擇器）

一個(gè)完整的HTML頁(yè)面是由很多不同的標(biāo)簽組成。標(biāo)簽選擇器可以直接設(shè)置HTML元素的樣式，比如h2、td、p、a，甚至可以是html本身。

語(yǔ)法：標(biāo)簽名 { 屬性：值 }

h2 { color :  blue ;}  <!--所有h2標(biāo)簽變藍(lán)色-->

a {  text-decoration : none ;  }  <!--所有鏈接沒(méi)有下劃線-->

3.ID選擇器

ID選擇器可以為標(biāo)有特定ID的HTML元素指定特定的樣式。根據(jù)元素ID來(lái)選擇元素，具有唯一性，這說(shuō)明一個(gè)ID在一個(gè)頁(yè)面內(nèi)只能出現(xiàn)一次，ID選擇器以“#”來(lái)定義，在HTML中用 id 來(lái)引用

語(yǔ)法：#id屬性值 { 屬性：值 }

CSS代碼：#demo { color : green ; }  <!--使 id 為 demo 的元素字體變?yōu)榫G色-->

HTML代碼：<p id="demo">我會(huì)變成綠色</p>

4.類選擇器

類選擇器使用類名來(lái)選擇元素，前提是要在HTML代碼中給元素添加一個(gè)class的屬性，class="類名",然后在CSS代碼中使用 " . " 進(jìn)行標(biāo)識(shí)，后面緊跟類名

語(yǔ)法：.class屬性值 { 屬性：值 } 

CSS代碼：.text { color : gray ; } <!--使 class 為 text 的元素字體變?yōu)?yellow-->

HTML代碼：<p class="text">我會(huì)變成灰色</p>

5.群組選擇器

當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔。要注意逗號(hào)是為了告訴瀏覽器規(guī)則中包含多個(gè)不同的選擇器，如果沒(méi)有這個(gè)逗號(hào)意義就完全不同了，就會(huì)變成后代選擇器，這點(diǎn)要注意。

 CSS代碼：.demo , p { color : pink ; }

HTML代碼:<p>我會(huì)變粉色</p><div class="demo">我也會(huì)變粉色</div>

“CSS中的基礎(chǔ)選擇器有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！