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{。..},这样做显然不可取,不符合书写习惯。前面也介绍过良好的书写习惯,对写出规范的代码,和其他同事的合作,以至于后期的维护都是很有好处的。

    标签: