上节说到选择器，这节我们继续分享关于选择器的内容。
id选择器：
元素可以设置一个id属性，然后通过id选择器对其进行css样式代码设置，从而达到该元素的样式显示。
语法：
#xxx {属性1:属性值;属性2:属性值;}#first { width:100px; height:100px;}
在id属性名前加上前缀“#”，就形成了id选择器。选择器的代码位置是<style></style>内部，也就是css代码区域处。
示例代码：
<html><head><title>id选择器</title><style type="text/css">#region2{width:200px;height:140px;border: 1px solid black;}</style></head><body><div>区域一</div><div id="region2">区域二</div><div>区域三</div></body></html>
id选择器，需要先给元素id属性赋值，然后在css代码区域，以上图方式说明代码，如果你们是使用的第三方的IDE工具编写css代码，会发现左花括号与id名称位于同行，一般通行写法都是那样的，我个人习惯了C语言的编写规则，习惯把css代码和JavaScript代码的花括号下移一行来显示，这个只是个人习惯而已，大家可以根据自己的喜好来做。
另外，css代码中，属性与属性之间是需要回车换行显示的，堆在一行虽然节省了空间，但是不利于程序员看，不容易辨识。属性与属性值之间是用英文冒号“:”分隔的，不是等于号“=”，记住不是等于号“=”，属性与属性值结束后，使用英文分号“;”分隔开。
class选择器：
class选择器，也可以叫“类”选择器。可以对“相同的元素”或者“不同的元素”设置同一个class属性，然后针对元素设置css样式代码。
语法：
.xxx {属性1：属性值；属性2：属性值；}.first { width:100px;height:100px;}
在class名称前加上前缀英文点号“.”，就形成了类选择器。
示例代码：
<html><head><title>class选择器</title><style type="text/css">.one{width:200px;height:120px;border: 1px solid black;}.two{background-color: green;}</style></head><body><div class="one two">区域一</div><div class="one">区域二</div><div class="one">区域三</div></body></html>
预览浏览器效果后，会发现三个div分隔区域的宽度、高度和边框都设置的一样，而div区域一的背景色变成了绿色，这个就是class选择器的作用。
在使用class属性时，你会发现可以重复叠加，比如上面代码的区域一就是由两个class属性叠加形成的，这个就是class属性的优势，当你需要给页面中的很多标签运行同样的样式代码，就可以写为一个class属性，然后分别给需要的元素，叠加上这个class属性即可，叠加时请用空格依次分开。
下节我们接着分享选择器的内容。
