1、ID和类选择器
相对于上下文选择器而言,利用它们可以不用考虑文档的层次结构。只要你在html标记中为元素添加了id和class属性,就可以在css选择器中使用ID和类名,直接选中文档中特定的区域
可以给id和class属性设定任何值,但不能以数字或者特殊符号开头。
1.1 类属性
类属性就是HTML元素的class属性,body标签中包含的任何HTML元素都可以添加这个属性
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>HTML5 Template</title> 5 <style> 6 p {font-family:helvetica,sans-serif;font-size:1.2em;} 7 .specialtext {font-style:italic;} 8 p.specialtext {color:red;} 9 p.specialtext span {font-weight:bold;} 10 </style> 11 </head> 12 <body> 13 <h1 class="specialtext">this is a heading with the <span>same class</span>as the second paragraph.</h1> 14 <p>this tag has no class.</p> 15 <p class="specialtext">when a tag has a class attribute,you can target it <span>regardless</span> of its position in the hierarchy.</p> 16 </body> 17 </html>
可以给元素添加多个类,比如:
<p class="specialtext featured">when a tag has a class attribute,you can target it <span>regardless</span> of its position in the hierarchy.</p>
选择同时存在这两个类名的元素,可以这样写:
.specialtext.feature {font-size:120%;}
注意,CSS选择符的两个类名之间没有空格,因为我们只想选择同时具有这两个类名的那个元素。如果加了空格,就变成“祖先/后代”关系的上下文选择符了
1.2 ID选择器
ID与类的写法相似,而且表示ID选择符的#的用法,也跟表示类选择符的.号类似
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>HTML5 Template</title> 5 <style> 6 p {font-family:helvetica,sans-serif;font-size:1.2em;} 7 #specialtext {font-style:italic;} 8 p#specialtext {color:red;} 9 p#specialtext span {font-weight:bold;} 10 </style> 11 </head> 12 <body> 13 <h1 id="specialtext">this is a heading with the <span>same class</span>as the second paragraph.</h1> 14 <p>this tag has no class.</p> 15 <p id="specialtext">when a tag has a class attribute,you can target it <span>regardless</span> of its position in the hierarchy.</p> 16 </body> 17 </html>
1.3 ID和类选择器的区别
1.3.1 什么时候使用ID
ID的用途是在页面中唯一的标志一个元素,同一个页面中的每一个ID属性,都必须有独一无二的名字,换个角度讲,每个ID名在页面中都只能用一次。
采用唯一ID标识的菜单后,可以使用上下文选择符来选择其中包含的各种类型的标签了。利用ID,可以在CSS中方便的定位到这个元素以及子元素
1.3.2 什么时候使用类
类的目的是为了标识一组具有相同特征的元素。但是我们在使用过程中,要避免“类泛滥”,也就是说,不要像使用ID一样,每个类都指定一个不同的类名,然后再为每个类编写规则,可以使用继承或者上下文选择器来让不同的标签共享样式,从而降低编写和维护的CSS量
总结:ID的用途是在页面标记中唯一地标志一个特定的元素。它能为我们编写CSS规则提供必要的上下文,排除无关的标记,而只选择上下文中的标签;相对于ID而言,类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符,以便我们为这些元素应用相同的CSS。而且,使用类也让为不同标签名的元素应用相同的样式成为可能