站長(zhǎng)資訊網(wǎng)
css的基本選擇器是指：1、通配符選擇器；2、標(biāo)簽選擇器；3、類選擇器；4、Id選擇器；5、結(jié)合元素選擇器；6、多類選擇器。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
基本選擇器介紹
- 基本選擇器又分為六種使用方式：如、通配符選擇器、標(biāo)簽選擇器、類選擇器、Id選擇器、結(jié)合元素選擇器、多類選擇器。
- 基本選擇器使用說明表。
| 選擇器 | 語(yǔ)法格式 | 含義 | 舉例 |
|---|---|---|---|
| 通配符選擇器 | *{屬性：值;} | 通用選擇器可以選擇頁(yè)面上的所有元素，并對(duì)它們應(yīng)用樣式，用 * 來表示。不建議使用，IE6不支持，給大型網(wǎng)站增加負(fù)擔(dān)。 | *{width: 300px;} |
| 標(biāo)簽選擇器 | 標(biāo)簽名{屬性：值;} | 標(biāo)簽選擇器，匹配對(duì)應(yīng)的HTML的標(biāo)簽。 | h1{color: red;} |
| 類選擇器 | .class屬性值{屬性：值;} | 類選擇器，給擁有指定的class屬性值的元素設(shè)置樣式。 | .box{color: red;} |
| Id選擇器 | #id屬性值{屬性：值;} | Id選擇器，在一個(gè) HTML 文檔中，Id 選擇器會(huì)使用一次，而且僅一次。Id選擇器以#來定義。 | #box{color: red;} |
| 結(jié)合元素選擇器 | 標(biāo)簽名 .class屬性值{屬性：值} | 選擇器會(huì)根據(jù)標(biāo)簽名中包含指定的.class屬性值的元素。 | p.box {color:red;} |
| 多類選擇器 | .class屬性值.class屬性值{屬性：值;} | 通過把兩個(gè)類選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類名的元素（類名的順序不限）。注意：在 IE7 之前的版本中，不同平臺(tái)的 Internet Explorer 都不能正確地處理多類選擇器。 | .box.box1{color:red;} |
通配符選擇器
- 接下來讓我們進(jìn)入通用選擇器實(shí)踐，筆者以嵌入式的形式，將
HTML頁(yè)面中的h1標(biāo)簽和p標(biāo)簽中的字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>通配符選擇器</title> <style> * { color: red; } </style> </head> <body> <h1>PHP中文網(wǎng)</h1> <p>PHP中文網(wǎng)</p> </body> </html>
-
結(jié)果圖
標(biāo)簽選擇器
- 接下來讓我們進(jìn)入標(biāo)簽選擇器實(shí)踐，筆者以嵌入式的形式，將
HTML頁(yè)面中的h1標(biāo)簽和p標(biāo)簽中的字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標(biāo)簽選擇器</title> <style> h1 { color: red; } </style> </head> <body> <h1>PHP中文網(wǎng)</h1> <p>PHP中文網(wǎng)</p> </body> </html>
-
結(jié)果圖
-
注意：標(biāo)簽選擇器是指給指定的標(biāo)簽設(shè)置樣式。
-
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標(biāo)簽選擇器</title> <style> h1 { color: red; } </style> </head> <body> <h1>成功不是擊敗別人，而是改變自己。</h1> <h1>PHP中文網(wǎng)</h1> <p>PHP中文網(wǎng)</p> </body> </html>
-
結(jié)果圖
-
現(xiàn)在大家應(yīng)該知道了
p標(biāo)簽為什么沒有改變了，因?yàn)闃?biāo)簽選擇器的作用是給指定的標(biāo)簽設(shè)置樣式的，接下來筆者將p標(biāo)簽的字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>標(biāo)簽選擇器</title> <style> h1 { color: red; } p { color: red; } </style> </head> <body> <h1>成功不是擊敗別人，而是改變自己。</h1> <h1>PHP中文網(wǎng)</h1> <p>PHP中文網(wǎng)</p> </body> </html>
-
結(jié)果圖
類選擇器
- 接下來讓我們進(jìn)入類選擇器實(shí)踐，筆者以嵌入式的形式，使用類的屬性值為
.box，來完成HTML頁(yè)面中的h1標(biāo)簽和p標(biāo)簽中的字體顏色設(shè)置為紅色。 - 首先我們將
HTML頁(yè)面中的第一個(gè)h1標(biāo)簽字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>類選擇器</title> <style> .box { color: red; } </style> </head> <body> <h1 class="box">成功不是擊敗別人，而是改變自己。</h1> <h1>PHP中文網(wǎng)</h1> <p>PHP中文網(wǎng)</p> </body> </html>
-
結(jié)果圖
-
注意：只要是
class屬性的值為.box的標(biāo)簽，不管它是什么標(biāo)簽，都會(huì)將字體顏色設(shè)置為紅色，其余的CSS樣式也是一致。 -
現(xiàn)在我們將第二個(gè)
h1標(biāo)簽和p標(biāo)簽字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>類選擇器</title> <style> .box{ color:red; } </style> </head> <body> <h1 class="box">成功不是擊敗別人，而是改變自己。</h1> <h1 class="box">PHP中文網(wǎng)</h1> <p class="box">PHP中文網(wǎng)</p> </body> </html>
-
結(jié)果圖
Id選擇器
- 接下來讓我們進(jìn)入
id選擇器實(shí)踐，筆者以嵌入式的形式，通過id屬性值為#box，將HTML頁(yè)面中的h1標(biāo)簽中的字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>id選擇器</title> <style> #box { color: red; } </style> </head> <body> <h1 id="box">成功不是擊敗別人，而是改變自己。</h1> </body> </html>
-
結(jié)果圖
-
注意：使用
id選擇器是給擁有指定的id屬性值來設(shè)置樣式，但是要注意在一個(gè)HTML頁(yè)面中id的屬性值必須是唯一的。
結(jié)合元素選擇器
-
接下來讓我們進(jìn)入結(jié)合元素選擇器實(shí)踐，筆者以嵌入式的形式，通過
h2標(biāo)簽class屬性值為.box元素的字體顏色，設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>結(jié)合元素選擇器</title> <style> h2.box { color: red; } </style> </head> <body> <h2 class="box">成功不是擊敗別人，而是改變自己。</h2> <span class="box">成功不是擊敗別人，而是改變自己。</span> </body> </html>
-
結(jié)果圖
-
注意：結(jié)合元素選取器執(zhí)行原理說明如下：首先是先找到
h2標(biāo)簽，然后再去h2標(biāo)簽中找class屬性值為.box，如果找到class屬性值為.box就給其設(shè)置樣式。現(xiàn)在大家應(yīng)該知道了span標(biāo)簽下面的class屬性值為.box為什么沒有渲染的原因了。
多類選擇器
-
接下來讓我們進(jìn)入多類選擇器實(shí)踐，筆者以嵌入式的形式，將
class屬性值包含.box和.box1元素的字體顏色設(shè)置為紅色。 -
代碼塊
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多類選擇器</title> <style> .box.box1 { color: red; } </style> </head> <body> <h2 class="box1 box">成功不是擊敗別人，而是改變自己。</h2> <span class="box box1">成功不是擊敗別人，而是改變自己。</span> <h2 class="box1 ">PHP中文網(wǎng)</h2> <span class="box">PHP中文網(wǎng)</span> </body> </html>
注意：多類選擇器執(zhí)行原理說明如下：首先class屬性值可以設(shè)置為多個(gè)以空格隔開即可，舉例：如果一個(gè)class屬性值包含.box和.box1將其設(shè)置樣式，通過把兩個(gè)類選擇器鏈接在一起，僅可以選擇同時(shí)包含這些類名的元素（類名的順序不限）。如果一個(gè)多類選擇器包含類名列表中沒有的一個(gè)類名，匹配就會(huì)失敗。現(xiàn)在大家應(yīng)該知道了單獨(dú)的class屬性值為.box和.box1沒有被渲染了。
（學(xué)習(xí)視頻分享：css視頻教程）
