Vichaguli vya ID vya CSS

Id selecto

Id selecto inaweza kusababisha eneo la HTML iliyotajwa na id kwenye kufikia stili kwa upofupi.

Id selecto inatumiwa na kina #.

Kwenye id selecto mbili chake, kina kwanza kinadefini rangi ya elementi kwa kina redi, na kina kwa pili kinadefini rangi ya elementi kwa kina kijani:

#red {color:red;}
#green {color:green;}

Kwenye kipindi cha HTML chake, eneo la id ya red p inadanganywa kwa kina redi, na eneo la id ya green p inadanganywa kwa kina kijani.

<p id="red">Mandhari hii ni redi。</p>
<p id="green">Mandhari hii ni kijani。</p>

Kujaambia:Id ya kifupi inaweza kuonekana katika hatua ya HTML mara moja tu. Wizuri nini, tazama XHTML: ukusasisha tovuti。

Id selecto na mtumaji wa kigeni

Katika muundo wa sasa, id selecto inatumiwa kwa kuanzisha mtumaji wa kigeni.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Stili zilizotumiwa juu zinatumiwa kwa kufanya matokeo kwa majina ya id ambayo yanaonesha sidebar. Elementi hii inaweza kuwa div au eneo la msingi wa tablica, inafikia na tablica au kina elementi, inafikia na kina elementi kama <em></em> au <span></span>, lakini matumizi hayafikia kwa sababu hatuwezi kuweka <p> katika kina elementi <span> (kama huzungumza kwa sababu, tazama XHTML: ukusasisha tovuti）。

Mchakato wa chaguo, matumizi mengi

Inakamaanishwa na kama elementi iliyotajwa kama sidebar inaweza kuonekana katika eneo ya hatua mara moja, id selecto kama mtumaji wa kigeni inaweza kutumiwa mara nyingi:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

在这里，与页面中的其他 p 元素明显不同的是，sidebar 内的 p 元素得到了特殊的处理，同时，与页面中其他所有 h2 元素明显不同的是，sidebar 中的 h2 元素也得到了不同的特殊处理。

单独的选择器

id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用：

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

根据这条规则，id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框，同时其周围会有 10 个像素宽的内边距（padding，内部空白）。老版本的 Windows/IE 浏览器可能会忽略这条规则，除非你特别地定义这个选择器所属的元素：

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

相关内容

如果您需要更深入地学习关于 ID 选择器的知识，请阅读 CodeW3C.com 的高级教程：Vichaguli wa ID wa CSS kwa Kina。