CSS - id选择器

  • 作者:KK

  • 发表日期:2016.1.26


id属性

在学ID选择器先向你补充一个HTML的知识先,就是标签属性中有一个属性叫id,比如<a id="myLink" href="http://xxx.com">XX页面</a>,这里给a标签添加了一个叫id的属性,值是"myLink",值可以自己随便起名字的,在整块HTML代码中,所有标签都可以添加id属性,但属性的值不能出现相同的,所以

<a id="myLink" href="http://xxx.com">XX页面</a>
<a id="myLink" href="http://xxx.com">YY页面</a>

这样有两个a标签的id属性值都叫"myLink"是不合法的,必须把名字改成不同的


把id使用在CSS选择器上

<body>
	<style type="text/css">
	#myLink{color:red;}
	</style>
	<p>
		<a id="myLink" href="http://xxx.com">链接</a>
	</p>
</body>

就是在选择器中先以#号开头,再接着写id的值myLink,用来描述"针对id=myLink的标签进行样式渲染",在这种情况下,就算代码被调整成以下结构也依然能进行样式渲染

<body>
	<style type="text/css">
	#myLink{color:red;}
	</style>
	<p>
		哎呀我包住的a标签被拿走了!
	</p>
	<a id="myLink" href="http://xxx.com">链接</a>
</body>

就是说,只要知道id,不管标签飞到哪里我都能对你进行样式渲染


最后补充:id也可以参与派生选择器,比如p #myId span a这样;而另外,实际工作中并不太支持你使用id选择器,这里只是让你认识一下,你开头可以用,工作一年后希望你不要再使用了