专注优质Wordpress企业网站搭建与优化

Htmldog权威CSS入门指点十八章（九）- CSS的分组和嵌套



Htmldog权威CSS入门指点十八章（九）- CSS的分组和嵌套 - 西米CC(http://ximicc.com)Grouping 分组

当许多选择器有同样属性时，可以使用逗号组合它们。例子：

  1. h2 {
  2. color: red;
  3. }
  4. .thisOtherClass {
  5. color: red;
  6. }
  7. .yetAnotherClass {
  8. color: red;
  9. }

上面的可以写成这样：

  1. h2, .thisOtherClass, .yetAnotherClass
  2. {
  3. color: red;
  4. }

Nesting 嵌套

假如CSS结构良好，不需要使用很多class或ID选择器。这是因为 CSS可以设定选择器里面选择器的属性。例子：

  1. #top {
  2. background-color: #ccc;
  3. padding: 1em
  4. }
  5. #top h1 {
  6. color: #ff0;
  7. }
  8. #top p {
  9. color: red;
  10. font-weight: bold;
  11. }

假如你碰到下面这样的形式，记得处理掉你网页上的class或ID。

  1. <div id="top">
  2. <h1>Chocolate curry</h1>
  3. <p>This is my recipe for making curry purely with chocolate</p>
  4. <p>Mmm mm mmmmm</p>
  5. </div>

这是由于，通过使用空格分离选择器，我们可以设定IDtop里面的h1颜色为#ff0，p是red和blod。这可能比较复杂，因为嵌套可以多级使用，所以需要多加练习。

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment