css中id和class的选择

css中id和class的选择

ID选择器在文档中是唯一的，也就是只可以引用一次，而CLASS就不同，在文档中可以重复的引用，其实这个定义已经很明白了，也就是说ID适用于定义结构和大的板块的时候，因为这样的元素在整个文档中也基本是唯一的，一般也只有一次，而CLASS则可以被引用在重复的需要定义样式的元素中，例如，对文档中每个段落中的部分文字引用一定的样式，那么采用ID选择器显然是很不明智的，因为这需要多次的重复的引用同一个样式。

一、ID选择器：

1、id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

2、id 选择器以 "#" 来定义。

3、下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：

#red {color:red;}

#green {color:green;}

4、下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色：

<p id="red">这个段落是红色。</p>

<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次

二、类选择器

1、在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

2、在上面的例子中，所有拥有 center 类的 HTML 元素均为居中。

3、在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。

         <h1 class="center">

                  This heading will be center-aligned

          </h1>

          <p class="center">

                  This paragraph will also be center-aligned.

         </p>


		

注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

三、二者主要的区别在哪里呢？

id你只能用来定义单一元素，定义二个以后。页面不会出现什么问题，但是W3检测的时候认为你页面不符合标准；class是类，同一个class可以定义多个元素。就页面效果而言，两个东西的视觉效果几乎无差别。

四、id 选择符为什么要少用，它有有什么局限性？

单一使用的样式用id，需要程序、js动态控制的样式用id，id在页面只能使用一次！提供少用id，因为id可能和页面嵌的程序冲突（比如名称相同等）！

五、id的使用原则

我们知道id具有唯一性，也就是说在整个xhtml中id是不能重复的，所以我们在写网页的时候，大的结构用id，比如：logo、导航、主体内容、版权等，根据命名规范分别命名为#logo、#nav、#contenter、#copyright。还有一种情况就是：我们要通过js作用一个层，以实现某种效果的时候，用id。这也是由id的唯一性决定的。

六、class的使用原则

1、class在css定义中具有普遍性，可以无限次的重复使用，这也体现了li+css布局的优越性。class常用于结构内部，这样做的好处是有利于网站代码的后期维护与修改，这样会让所有的class成为id的子级或者孙级。

2、另外需要注意一点的是尽量不要让class包含id，比如.ff #childer{。..}，这样做显然不可取，不符合书写习惯。前面也介绍过良好的书写习惯，对写出规范的代码，和其他同事的合作，以至于后期的维护都是很有好处的。