簡(jiǎn)要講解CSS中的類(lèi)型選擇器、ID選擇器、類(lèi)選擇器
我要評(píng)論類(lèi)型選擇器
類(lèi)型選擇器，是以html元素類(lèi)型作為選擇條件。
網(wǎng)頁(yè)元素：在CSS教程中，對(duì)于如“<p></p>”、“<h3></h3>”這些不再稱呼為標(biāo)簽，而統(tǒng)一稱呼為網(wǎng)頁(yè)元素。
在網(wǎng)頁(yè)元素中，都可以按類(lèi)型進(jìn)行區(qū)分，其類(lèi)型可以作為CSS的選擇符，如“<a></a>”、“<ul></ul>”、“<div></div>”等，對(duì)應(yīng)的選擇器分別為“a”、“ul”、“div”。
例子：
- a{
- text-decoration: none;
- }
該例子表示網(wǎng)頁(yè)上所有的超鏈接取消下劃線。
ID選擇器
CSS ID選擇器允許選擇網(wǎng)頁(yè)元素的ID進(jìn)行樣式表應(yīng)用。
ID選擇器以“#”標(biāo)識(shí)，后面緊跟html元素id名稱。
html代碼如下：
- <div id="nav"><!--nav start-->
- <h2><a href="index.html">首頁(yè)</a></h2>
- <h2><a href="blog.html">博客</a></h2>
- <h2><a href="guestbook.html">留言板</a></h2>
- </div><!--nav end-->
在該html代碼如中，有一個(gè)id="nav"的DIV網(wǎng)頁(yè)元素。使用ID選擇器對(duì)該元素進(jìn)行樣式表應(yīng)用：
- #nav {
- font-size: 14px;
- width: 500px;
- }
該CSS樣式表示id為nav的網(wǎng)頁(yè)元素，其寬度為500px，其內(nèi)文字大小為14px。
類(lèi)(class)選擇器
CSS 類(lèi)選擇器允許選擇網(wǎng)頁(yè)元素的類(lèi)進(jìn)行樣式表應(yīng)用。
類(lèi)選擇器以 . 符號(hào)標(biāo)識(shí)，后面緊跟類(lèi)名稱。
一個(gè)類(lèi)選擇器例子：
- .catlist {
- color: #d51300;
- }
該 CSS 樣式表示網(wǎng)頁(yè)中 class="catlist" 的網(wǎng)頁(yè)元素，其文字顏色為 #d51300 。
在 html 中應(yīng)用類(lèi)選擇器
要在 html 代碼中應(yīng)用一個(gè)類(lèi)(class)樣式，只需在標(biāo)簽內(nèi)使用 class 屬性，取值為類(lèi)名。
html 代碼例子：
- <h3>文章分類(lèi)</h3>
- <ul class="catlist">
- <li>情感世界</li>
- <li>技術(shù)文章</li>
- <li>網(wǎng)絡(luò)文摘</li>
- <li>其他</li>
- </ul>
在該 html 代碼如中，<ul></ul>內(nèi)包含的文字顏色都被渲染為 #d51300 顏色。當(dāng)然，也可以再為其中的一個(gè)或一些 <li></li> 元素單獨(dú)定義另外的樣式。
提示
如上例所示，只要網(wǎng)頁(yè)元素類(lèi)名為 catlist ，都將受到該樣式表的影響，而不管它具體是何種類(lèi)型的網(wǎng)頁(yè)元素。
類(lèi)選擇器會(huì)作用于所有類(lèi)名相同的網(wǎng)頁(yè)元素，有復(fù)用效果，這個(gè)是和 ID 選擇器的區(qū)別。
類(lèi)名的第一個(gè)字符不能使用數(shù)字，它無(wú)法在 Mozilla 或 Firefox 瀏覽器中起作用。
相關(guān)文章
該不該使用ID選擇器？淺談對(duì)CSS的ID選擇器的使用建議
在不嵌套單獨(dú)使用ID選擇器的情況下,它是比較快的,然而各種各樣的原因使開(kāi)發(fā)者們拋棄對(duì)ID選擇器的使用.究竟該不該使用ID選擇器？這里我們就來(lái)淺談對(duì)CSS的ID選擇器的使用建議2016-07-11- 網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：英文教程:五種CSS選擇器類(lèi)型. CSScommandsareusuallygroupedinthecurlybracestomakeasetofrules.Followingarethevariouswaysavaila2009-04-02
IE7對(duì)css選擇器的改進(jìn)-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
1、對(duì)偽類(lèi)的支持。IE6和更低的版本對(duì)于偽類(lèi)的支持僅限于a標(biāo)簽，諸如“:hover”、“:active”、“:focus”之類(lèi)的偽類(lèi)理論上是應(yīng)該適用于所有2008-10-17CSS屬性選擇器的四種格式-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
屬性選擇器（AttributeSelectors），或許你不應(yīng)該對(duì)屬性選擇器感到陌生，從本質(zhì)上說(shuō)，id跟類(lèi)選擇器其實(shí)就是屬性選擇器，只不過(guò)是選擇了id或者類(lèi)的值（value）而已。2008-10-17最常用的五類(lèi)CSS選擇器-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
一些新手朋友對(duì)選擇器一知半解，不知道在什么情況下運(yùn)用什么樣的選擇器，這是一個(gè)比較頭疼的問(wèn)題，針對(duì)新手朋友，對(duì)CSS選擇器作一些簡(jiǎn)單的說(shuō)明，希望能對(duì)大家的學(xué)習(xí)工作2008-10-17- 偽類(lèi)，用于給元素的片段添加樣式，這如何理解呢？比如你要讓一個(gè)段落的第一行的文字加粗，那么這個(gè)選擇器是不二之選2012-04-18
- 前面花了兩節(jié)內(nèi)容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法，今天要和大家一起學(xué)習(xí)CSS3選擇2012-01-21
- 上一切在《CSS3選擇器——基本選擇器》中主要介紹了CSS3選擇器的第一部分，這節(jié)主要和大家一起來(lái)學(xué)習(xí)CSS3選擇器的第二部分——屬性選擇器2012-01-21
- CSS的選擇器，我想大家并不會(huì)陌生吧，因?yàn)樘焯煸谑褂?，但?duì)于CSS3的選擇器，要運(yùn)用的靈活到位，我想對(duì)很多朋友還是一定的難度，特別是CSS3中的:nth選擇器2012-01-21
- *通配符選擇器，經(jīng)常用于css reset（樣式重置），清理標(biāo)簽的默認(rèn)樣式，但現(xiàn)在一般不提倡直接使用*了，主要是*會(huì)匹配所有標(biāo)簽，相當(dāng)耗資源。*在css的優(yōu)先級(jí)中是最低的。2011-07-27