CSS书写方法二 class与id详解

class和id的用法

 　　class是类选择符，id就叫做id标签选择符，它们都可以对网页中的标签定义样式。 如果你想让段落中的内容居中显示和居右显示，可以按照下面方法定义：  

 
 

  
  p.center {text-align:center;} p.right {text-align:right;}
 
 

  它的定义方法是：指定标签.类名 {属性:属性值} center和right就是两个类选择符，可以简称为类，我们可以引用这两个类来定义段落，如下：  

 
 

  
  <p class="center">居中显示的内容</p> <p class="right">居右显示的内容</p>
 
 

  但是这样定义的类只能针对指定的标签起作用，其它标签无法使用，比如我们想让一个div中的内容居右显示，定义如下：  

 
 

  
  <div class="right">我想要这段内容居右显示</div>
 
 

  但是它却不能居右显示，因为它是按照指定标签定义的。也可以让它可以作用于任何一个标签的定义方法：  

 
 

  
  .right {text-align: right;}
 
 

  它的定义方法是：.类名 {属性:属性值} 使用方法：  

 
 

  
  <div class="right">我想要这段内容居右显示</div> <p class="right">居右显示的内容</p>
 
 

  ID选择符和class选择符相似，它的定义方法也相似，区别只是将“.”改为了“#”。  

 
 

  
  p#center {text-align:center;} p#right {text-align:right;}
 
 

  它的定义方法是：指定标签#类名 {属性:属性值} 这次给指定标签<p>定义了两个ID，引用方法是：  

 
 

  
  <p id="center">居中显示的内容</p>  <p id="right">居右显示的内容</p>
 
 

  和类相同，这种指定标签的定义方法只针对定义的标签显示，如果要将它定义为通用样式：  

 
 

  
  #center {text-align:center;} #right {text-align:right;}
 
 

  使用方法：  

 
 

  
  <p id="center">居中显示的内容</p>  <p id="right">居右显示的内容</p>
 
 

class和id的区别

 class和id看上去区别仅仅是“.”和“#”，他们最大的区别在于：id选择符在每个页面只能使用一次，它是唯一的，而class可以随意无限次使用。  

class和id的派生选择器

 和基本语法一样，class和id也有派生选择器，用法也相同。  

 
 

  
  #center em {color:red;} #right em {color:blue;;}
 
 

  引用方法：  

 
 

  
  <div id="center">居中显示的文字<em>这里是红体字</em></div>  <div id="right">居右显示的文字<em>这里是蓝体字</em></div>