程序员人生 网站导航

CSS:id选择器的使用

栏目:htmlcss时间:2014-12-22 08:14:11

本文介绍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>

效果图:


------分隔线----------------------------
------分隔线----------------------------

最新技术推荐