css選擇符類型詳細(xì)介紹
發(fā)布時(shí)間：2014-04-16 14:58:30 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css選擇符類型詳細(xì)介紹，包括標(biāo)簽選擇符、類選擇符、ID選擇符、包含選擇符、通配選擇符、選擇符分組、標(biāo)簽指定式選擇符、組合選擇符,需要的朋友可以參考下
一、標(biāo)簽選擇符：針對(duì)某一類標(biāo)簽，可以以標(biāo)簽作為選擇符
復(fù)制代碼
代碼如下:<style type="text/css">
p{color:#F00; font-size:36px;}
</style>
</head>
<body>
<p>0.5秒三分絕殺!波特蘭上演波什時(shí)刻 第N次拯救熱火</p>
<h1>玩命暴扣扳平+助攻絕殺三分 熱火太幸運(yùn)有這顆隊(duì)魂</h1>
<p>熱火今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p>詹波為小弟惡犯叫屈 當(dāng)事人他都起飛了!肯定假摔</p>
<p>斯帥稱客戰(zhàn)開拓者奧登不打 波什：他很快就可復(fù)出</p>
</body>
二、類選擇符：通過類選擇符定義一個(gè)樣式，需要改樣式的元素就在該元素內(nèi)通過class屬性將該樣式添加到該元素中定義類名的時(shí)候數(shù)字不要開頭，起名的時(shí)候最好要有意義,可以同時(shí)給某個(gè)元素應(yīng)用多個(gè)類格式：class="類1 類2"(類與類之間用空格隔開)
復(fù)制代碼
代碼如下:<style type="text/css">
.red{color:#C00;}
.family{font-family:"漢儀清韻體簡(jiǎn)";}
</style>
</head>
<body>
<p class="red">0.5秒三分絕殺!波特蘭上演波什時(shí)刻 第N次拯救熱火</p>
<h1>玩命暴扣扳平+助攻絕殺三分 熱火太幸運(yùn)有這顆隊(duì)魂</h1>
<p>熱火今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p>詹波為小弟惡犯叫屈 當(dāng)事人他都起飛了!肯定假摔</p>
<p class="red family">斯帥稱客戰(zhàn)開拓者奧登不打 波什：他很快就可復(fù)出</p>
</body>
三、ID選擇符：只想針對(duì)某一個(gè)元素進(jìn)行控制，與類基本相似，只是以英文"#"開頭，因?yàn)镮D具有唯一性，所以在網(wǎng)頁中只能出現(xiàn)一次定義id的時(shí)候數(shù)字不要開頭，起名最好要有意義
復(fù)制代碼
代碼如下:<style type="text/css">
#two{color:#600; font-family:'漢儀行楷簡(jiǎn)';}
#one{font-family:Arial, Helvetica, sans-serif; font-family:'漢儀行楷簡(jiǎn)'; font-size:36px;}
</style>
</head>
<body>
<h1>李克強(qiáng)主持召開<span>國(guó)務(wù)院</span>常務(wù)會(huì)議</h1>
<h2 id="two"> 聽取最低生活保障政策落實(shí)督查情況匯報(bào)</h2>
部署進(jìn)一步加強(qiáng)和改進(jìn)低保工作
<div id="one">決定將《社會(huì)救助暫行辦法（草案）》向社會(huì)公開征求意faksdjfkasfkasdfj</div>
</body>
四、包含(派生)選擇符：（選擇符的嵌套使用，針對(duì)某個(gè)元素中的子元素進(jìn)行控制，就可以使用該方法，這樣就可以不用id或者類選擇符，代碼可以簡(jiǎn)潔
語法：e1 e2{屬性：屬性值}（e1是父元素，e2是子元素）
復(fù)制代碼
代碼如下:<style type="text/css">
p strong{color:#F00;}
</style>
</head>
<body>
<p>0.5秒三分絕殺!波特蘭上演波什時(shí)刻 第N次拯救熱火</p>
<h1>玩命暴扣扳平+助攻絕殺三分 熱火太幸運(yùn)有這顆隊(duì)魂</h1>
<p><strong>熱火</strong>今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p>詹波為小弟惡犯叫屈 當(dāng)事人他都起飛了!肯定假摔</p>
<div>斯帥稱客戰(zhàn)開拓者奧登不打 波什：他很快就可復(fù)出</div></p> <p><ul>
<li> 安東尼推特怒罵無禮粉絲：我沒要求你這貨支持我</li>
<li>大范：籃網(wǎng)就像低級(jí)聯(lián)賽球隊(duì) 他們的處境聯(lián)盟最差</li>
<li>基德求教真神獲五字真經(jīng) 波帥：他夠強(qiáng)硬能做到這點(diǎn)</li>
</ul>
<div>滅<strong>雷霆</strong>擒步行者!隱形殺手冒頭 東部又一新控神誕生</div>
<h1>加內(nèi)特直言還沒找到節(jié)奏：經(jīng)歷過比這更艱難的時(shí)期</h1>
</body>
五、通配選擇符：*{屬性：屬性值} 可以控制所有的html元素作用范圍很廣，但是效率較低（工作中慎用）
復(fù)制代碼
代碼如下:<style type="text/css">
*{color:#0C0; font-size:18px;}
</style>
</head>
<body>
<p>0.5秒三分絕殺!波特蘭上演波什時(shí)刻 第N次拯救熱火</p>
<h1>玩命暴扣扳平+助攻絕殺三分 熱火太幸運(yùn)有這顆隊(duì)魂</h1>
<p>熱火今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p>詹波為小弟惡犯叫屈 當(dāng)事人他都起飛了!肯定假摔</p>
<div>斯帥稱客戰(zhàn)開拓者奧登不打 波什：他很快就可復(fù)出</div></p> <p><ul>
<li> 安東尼推特怒罵無禮粉絲：我沒要求你這貨支持我</li>
<li>大范：籃網(wǎng)就像低級(jí)聯(lián)賽球隊(duì) 他們的處境聯(lián)盟最差</li>
<li>基德求教真神獲五字真經(jīng) 波帥：他夠強(qiáng)硬能做到這點(diǎn)</li>
</ul>
<div>滅雷霆擒步行者!隱形殺手冒頭 東部又一新控神誕生</div>
<h1>加內(nèi)特直言還沒找到節(jié)奏：經(jīng)歷過比這更艱難的時(shí)期</h1>
</body>
六、選擇符分組（集體控制）：將同樣的樣式用于多個(gè)選擇符，選擇符之間用逗號(hào)隔開
語法：選擇符1,選擇符2,選擇符3{屬性：屬性值}
復(fù)制代碼
代碼如下:<style type="text/css">
p,h1,div{
color:#F00;
font-size:36px;
}
</style>
</head>
<body>
<p>0.5秒三分絕殺!波特蘭上演波什時(shí)刻 第N次拯救熱火</p>
<h1>玩命暴扣扳平+助攻絕殺三分 熱火太幸運(yùn)有這顆隊(duì)魂</h1>
<p><strong>熱火</strong>今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p>詹波為小弟惡犯叫屈 當(dāng)事人他都起飛了!肯定假摔</p>
<div>斯帥稱客戰(zhàn)開拓者奧登不打 波什：他很快就可復(fù)出</div></p> <p><ul>
<li> 安東尼推特怒罵無禮粉絲：我沒要求你這貨支持我</li>
<li>大范：籃網(wǎng)就像低級(jí)聯(lián)賽球隊(duì) 他們的處境聯(lián)盟最差</li>
<li>基德求教真神獲五字真經(jīng) 波帥：他夠強(qiáng)硬能做到這點(diǎn)</li>
</ul>
<div>滅<strong>雷霆</strong>擒步行者!隱形殺手冒頭 東部又一新控神誕生</div>
<h2>加內(nèi)特直言還沒找到節(jié)奏：經(jīng)歷過比這更艱難的時(shí)期</h2>
</body>
七、標(biāo)簽指定式選擇符：想用id或class的同時(shí)還想用標(biāo)簽選擇符
語法：p#one(注意這里不用空格和任何分隔符)表示針對(duì)id為one的p標(biāo)簽
h1.p1表示針對(duì)class為p1的h1標(biāo)簽
復(fù)制代碼
代碼如下:<style type="text/css">
p#one{
color:#F00;
font-size:36px;
}
p.cla{
background-color:#00F;
font-size:24px;
}
</style>
</head>
<body>
<p id="one">0.5秒三分絕殺!波特蘭上演波什時(shí)刻 第N次拯救熱火</p>
<h1>玩命暴扣扳平+助攻絕殺三分 熱火太幸運(yùn)有這顆隊(duì)魂</h1>
<p><strong>熱火</strong>今夜還一功臣必須贊 11分不多但卻分分是金!</p>
<p class="cla">詹波為小弟惡犯叫屈 當(dāng)事人他都起飛了!肯定假摔</p>
</body>
八、組合選擇符：將所有選擇符類型組合使用
相關(guān)文章
- 這篇文章主要介紹了CSS中的屬性選擇符和結(jié)構(gòu)化偽類,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的類和ID選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-01
- 這篇文章主要介紹了CSS中的選擇符實(shí)際使用指南,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-28
- 這篇文章主要介紹了CSS中的各種選擇符,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-07-17
- 這篇文章主要介紹了幾個(gè)特殊的CSS選擇符使用，在某些特殊情況下還是比較實(shí)用的，需要的朋友可以參考下2014-08-20
- 成天都要與樣式打交道的朋友，相信對(duì)CSS選擇符(CSS Selectors)都不會(huì)陌生。不過對(duì)于剛接觸或者還不是很熟悉css的朋友來說，能夠找到一份對(duì)于CSS選擇符的相關(guān)例子集合，還是2009-12-08
本篇文章主要介紹了詳解如何編寫高效的 CSS 選擇符，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-10
