CSS：id選擇器的使用
來源：程序員人生 發布時間：2014-12-22 08:14:11 閱讀次數：3483次
本文介紹css中id選擇器的基本用法：為某個特定的標簽內容設置屬性。
代碼整理自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標簽的屬性，作為其它標簽屬性時無效（不寫A時表示B可以作為所有標簽的屬性）；
（2）A具有B這個id屬性以后，A下1級的C這個標簽將利用這個樣式（不寫C表示A中所有的標簽都將利用這個樣式）。-->
<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>
<!--即便被標注為bigStyle的元素只能在文檔中出現1次，這個id選擇器作為派生選擇器也能夠被使用很屢次-->
</head>
<body>
<h3>redText和greenText沒有定義在任何標簽之下：</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文檔中出現1次，因此上述代碼僅為表達id的使用規則，實際開發中不能這樣寫。固然，上述代碼在大多數閱讀器中并沒有問題，這只是由于閱讀器本身的容錯能力。-->
</body>
</html>
效果圖：
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
