CSS：id選擇器的使用
來源：程序員人生 發(fā)布時間：2014-12-22 08:14:11 閱讀次數(shù)：3493次
本文介紹css中id選擇器的基本用法：為某個特定的標(biāo)簽內(nèi)容設(shè)置屬性。
代碼整理自w3school：http://www.w3school.com.cn
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>id屬性的使用</title>
<head>
<!--id 選擇器以 # 來定義-->
<!--A#B C表示：
（1）B這個id適用于作為A標(biāo)簽的屬性，作為其它標(biāo)簽屬性時無效（不寫A時表示B可以作為所有標(biāo)簽的屬性）；
（2）A具有B這個id屬性以后，A下1級的C這個標(biāo)簽將利用這個樣式（不寫C表示A中所有的標(biāo)簽都將利用這個樣式）。-->
<style type="text/css">
#redText {color:red}
#greenText {color:green}
div#blueText {color:blue}
#bigStyle p {font-size:30px}
#bigStyle h1 {font-size:30px}
</style>
<!--即便被標(biāo)注為bigStyle的元素只能在文檔中出現(xiàn)1次，這個id選擇器作為派生選擇器也能夠被使用很屢次-->
</head>
<body>
<h3>redText和greenText沒有定義在任何標(biāo)簽之下：</h3>
<p id="redText">這個段落使用了id屬性：redText</p>
<p id="greenText">這個段落使用了id屬性：greenText</p>
<div id="greenText">
<p>這個段落所屬的div使用了id屬性：greenText</p>
</div>
<hr/>
<h3>blueText是定義在div之下的：</h3>
<p id="blueText">這個段落使用了id屬性：blueText，但是它不在div中</p>
<div id="blueText">
<p>這個段落所屬的div使用了id屬性：blueText</p>
</div>
<hr/>
<h3>id 選擇器和派生選擇器：</h3>
<div id="bigStyle">
<p>這是1個段落。</p>
</div>
<div id="bigStyle">
<h1>這是另外一個段落。</h1>
</div>
<!--由于id屬性只能在每一個HTML文檔中出現(xiàn)1次，因此上述代碼僅為表達(dá)id的使用規(guī)則，實際開發(fā)中不能這樣寫。固然，上述代碼在大多數(shù)閱讀器中并沒有問題，這只是由于閱讀器本身的容錯能力。-->
</body>
</html>
效果圖：
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進(jìn)行捐贈
