首页 > 技术文章 > css常用属性总结第二弹:id选择器

smalldark 2017-02-22 21:32 原文

承接上一篇class选择器,这一篇我们来说说css的id选择器。

id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和class
选择器类似,基本用法如下:

#element{属性名:属性值}

我们来看一个列子吧:
<html>
<head>
<style type="text/css">
#p1{color:red;font-weight:600;}
</style>
</head>

<body>
<p id="p1">
This paragraph will also be center-aligned.
</p>
</body>
</html>

在浏览器里运行上面一段上面一段代码,就可以看到p元素的文字为加粗红色,看到了吧,id选择器用法就是这么简单。
不过我们知道,可以为多个元素指定相同的类名,但是对于id名,html文档中只能出现一个id名,所以我们得记住:保持id的唯一性。

不过有的人会说,如果一个html文档中出现了多个相同的id名会出现什么情况。实际上,浏览器通常不检查html中id的唯一性,这就意味着如果你在
html文档中设置了多个相同id属性值的元素,就可能为这些元素应用相同的样式.
如:

<html>
<head>
<style type="text/css">
#same{color:red;font-weight:600;}
</style>
</head>

<body>
<p id="same">
This paragraph will also be center-aligned.
</p>
<h4 id="same">This is a title</h4>
</body>
</html>


结果p元素和h4元素中的文字也是红色粗体,证明有相同id的元素都会有该样式,但这种用法是错误的,如果只是想让多个元素拥有相同样式,
请记住使用class属性!这里顺便提一下,多个相同id名会导致编写dom脚本变得困难。我们后面会提到的。
好了,今天的文章就到这里了,谢谢大家!

推荐阅读