CSS：id选择器的使用
来源：程序员人生 发布时间：2014-12-22 08:14:11 阅读次数：3126次
本文介绍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>
效果图：
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
