0 Comments

七大CSS选择符用法详解(2)

发布于:2013-08-15  |   作者:广州网站建设  |   已聚集:人围观

五、class选择符

其实CSS选择符中id是对于XHTML标签的扩展,而class是对SHTML多个标签的一种组合,class直译的意思是类或类别。
对于XHTML标签使用class=""进行名称指派。与id不同,class可以重复使用,对于多个样式相同的元素,可以直接定义为一个class。
使用class的优点已不言自明,它对CSS代码重用性有良好的体现,众多的标签均可以使用一个样式来定义而不需要每一个编写一个样式代码。
广州网站建设,网站建设,广州网页设计,广州网站设计
XHTML如下:


  1. <pclasspclass="he"></p> 
  2. <spanclassspanclass="he"></span> 
  3. <h5classh5class="he"></h5> 
  4.  

CSS如下:


  1. .he  
  2. {  
  3. margin:10px;  
  4. background-color:red;  
  5. }  
  6.  

六、标签指定式的选择符

如果想同时使用CSS选择符中的id和class,也想同时使用标签选择符,可以使用如下的方式:


  1. h1#content{}  
  2. /*表示所有id为content的h1标签*/  
  3. h1.p1{}  
  4. /*表示所有class为p1的h1标签*/  
  5.  

标签指定式选择符的精度介于标签选择符及id/class选择符之间,是常用的选择符之一。
广州网站建设,网站建设,广州网页设计,广州网站设计

七、组合选择符

对于上面的所有CSS选择符而言,进行组合使用。如下:


  1. h1.p1{}  
  2. /*表示h1下的所有class为p1的标签*/  
  3. #contenth1{}  
  4. 表示id为content的标签下的所有h1标签  
  5. h1.p1,#contenth1{}  
  6. /*表示h1下的所有class为p1的标签以及id为content的标签下的所有h1标签*/  
  7. h1#contenth2{}  
  8. /*id为content的h1标签下的h2标签*/  
  9.  

CSS选择符是非常自由与灵活的,可以根据页面的需要,使用各种选择符,尽量结构化与优化CSS文件.

飞机