这一节我们分享一下关于CSS选择器的内容。
在HTML元素中，属性id和class是两个最基本的公共属性，意思就是每个HTML标签元素都有这两个属性可以配置。
元素的id属性：
id属性在页面中被赋予了唯一性。如果一个页面中出现了多个相同id属性的取值，CSS选择器和JavaScript就无法分辨要控制的元素。
语法：
<div id="first"></div><xxx id=""></xxx>
示例代码：
<html><head><title>id属性</title><style type="text/css">#first{......}</style></head><body><div id="first">内容</div><span id="first">内容<span></body></html>
上面的代码中，是有错误的，因为在同一个页面内，不允许出现两个相同的id，但是在不同的页面下，id相同没关系。
使用id属性，css样式代码就只是针对此元素设置，与其它元素均无关。
元素的class属性：
class，就是“类”的意思。采用了C、Java等编程语言中“类”的叫法。我们可以为同一页面的相同元素或不同元素设置相同的class，使得它们具有相同的样式。如果页面中有两个或两个以上的元素需要定义相同的样式，建议使用class属性，这样可以减少大量的重复代码。
语法：
<div class="A"></div><xxx class="A"></xxx>
示例代码：
<html><head><title>class属性</title><style type="text/css">.first{......}</style></head><body><div class="first">内容</div><span class="first">内容</span></body></html>
以上代码是正确的，在同一页面内，可以给相同的元素或者不同的元素都设置class属性；
对于元素id和class有两点需要注意，一是同一个标签可以同时定义多个class属性，二是id也可以写成name，区别在于，name是HTML的标准，而id是XHTML的标准，因为XHTML标准更为严格些，所以在页面中都使用id，不建议大家使用name属性。
另外大家有没有注意到，id属性和class属性，在<stytle>中的表述不一样，id属性使用#表示，而class属性使用点表示。
什么是CSS选择器：
很多教程上直接介绍选择器由三部分组成，分别是选择器、属性和属性值，然后就开始给大家介绍各种选择器。对于初学者来说，理解起来很困难。
示例代码：
<html><head><title>什么是选择器</title><style>xxx{......}</style></head><body><div>区域一</div><div>区域二</div><div>区域三</div></body></html>
在这个示例代码中，如果我们需要把区域二的背景颜色改为红色，那么我们就需要通过一种方式选中它，然后对它设置css样式代码，而通过这种所谓的选中方式，就是选择器。
选择器的不同，在于它的选择方式不同，但是目的是相同的，就是把你需要的标签元素选中，然后对它进行设置css样式代码。
CSS选择器的语法格式：
选择器{样式属性1：属性值；样式属性2：属性值；......}
元素选择器：
元素选择器，就是选中相同的元素标签，在对其设置css样式代码。
语法：
元素选择符{属性1:属性值;属性2：属性值;}div {width:100px;height:100px;}
示例代码：
<html><head><title>元素选择器</title><style type="text/css">p{ color:blue;}div{ width:200px;border: 1px solid black;}</style></head><body><div><p>HTML</p></div><div><p>CSS</p></div></body></html>
我们预览浏览器后，可以看到页面内的段落p元素，字体颜色都是蓝色，页面内的全部区域分隔符div，宽度都是200像素，并且有1像素宽的边框。
元素选择器的好处就是，可以对同一类的元素进行设定css样式代码。
那么元素有哪些呢？
段落<p>元素，
区域分隔<div>元素，
单行区域<span>元素，
文本标题<h1>~<h6>，
表单控件<input>元素，
有序列表<ol>元素，
无序列表<ul>元素，
列表项<li>元素，
图片<img>元素，等等，这些我们在HTML中学习到的标签符都是元素选择符。
下一节我们接着分享。
1550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
