当在CSS文件的一部分中定义CSS选择器时，CSS选择器会影响HTML元素，

Question

CSS选择.content-block影响本节中的.content-block div：

#branding, #mainbar, #accordion, .content, .content0, .content-block, .posts, #footer a { 
    margin-left: 10px !important; 
    margin-right: 10px !important; 
} 

但不是在这一个：

.content-block { 
      float: left; 
      margin: 10px 0 20px; 
      width: 300px; 
     } 
     .content-block h2 { 
      background: url(images/underline.png) repeat-x scroll center; 
      font-size: 22px; 
      letter-spacing: -1px; 
      padding: 0 0 15px 0; 
     } 
     .content-block p { 
      padding-top: 20px; 
     } 

CSS文件：

/* Structure */ 
    .container { 
     margin: 0 auto; 
     overflow: hidden; 
     width: 960px; 
    } 
    #header .container, #tagline .container { 
     margin: 0 auto; 
     overflow: hidden; 
     text-align: center; 
     width: 960px; 
    } 
    #header, #intro, #tagline, #content { 
     background: url(images/bg.png) top center repeat; 
    } 
    #branding, #mainbar, #accordion, .content, .content0, .content-block, .posts, #footer a { 
     margin-left: 10px !important; 
     margin-right: 10px !important; 
    } 
    #intro h2, #content h2, #nav li a { 
     text-shadow: 0 1px 0 #FFF; 
    } 
    /* Header */ 
    #header { 
    } 
    #header a { 
     color: #333 
    } 
    #header a:hover { 
     color: #28A 
    } 
    #branding { 
     float: left; 
     margin: 10px 0 10px; 
     width: 940px; 
    } 
    #header h1, #lang { 
     margin: 20px 0 12px; 
     width: 280px; 
    } 
    #header h1 { 
     float: left; 
     overflow: hidden; 
     width: 940px; 
    } 
    /* Intro */ 
    #intro, #intro2 { 
     background: #333; 
    } 
    #intro { 
     height: 300px; 
    } 
    #intro2 { 
     background: #333; 
    } 
    #intro2 h2 { 
     color: #DDD; 
     font-size: 30px; 
    } 
    #intro2 h2 { 
     color: #DDD; 
     font-size: 30px; 
    } 
    .shadow-top { 
     height: 10px; 
     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#222), to(#333)); 
     background: -moz-linear-gradient(#222, #333); 
     -pie-background: linear-gradient(#222, #333); 
    } 
    .shadow-bottom { 
     height: 10px; 
     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333), to(#222)); 
     background: -moz-linear-gradient(#333, #222); 
     -pie-background: linear-gradient(#333, #222); 
    /* Tagline */ 
    #tagline { 
    } 
    .content { 
     margin: 20px 0; 
    } 
    .content0 h2, .content h2 { 
     font-size: 30px; 
     letter-spacing: -1px; 
    } 
    .content0 { 
     margin: 130px 0 50px; 
    } 
    /* Content */ 
    #content { 
    } 
    #mainbar { 
     float: left; 
     margin: 0 0 0; 
     overflow: hidden; 
    } 
    .content-block { 
     float: left; 
     margin: 10px 0 20px; 
     width: 300px; 
    } 
    .content-block h2 { 
     background: url(images/underline.png) repeat-x scroll center; 
     font-size: 22px; 
     letter-spacing: -1px; 
     padding: 0 0 15px 0; 
    } 
    .content-block p { 
     padding-top: 20px; 
    } 
    #blog { 
     float: left; 
     width: 640px 
    } 
    .post { 
     margin-bottom: 30px; 
    } 
    .post { 
     border-bottom: 1px solid #BBB; 
     padding: 0 0 30px 0; 
    } 
    .post h2 { 
     margin-bottom: 10px; 
    } 
    .post h2 a { 
     color: #333; 
    } 
    .post h2 a:hover { 
     color: #28A; 
    } 
    .post .posted-on { 
     font-size: 10px; 
     margin-bottom: 10px; 
    } 
    .post p { 
     margin-bottom: 30px; 
    } 
    .post p.read-more a { 
     background: #28A; 
     color: #FFF; 
     padding: 5px 20px; 
    } 
    .post .post-bottom { 
     font-size: 10px; 
    } 

php文件：

<div class="container"> 
     <div id="mainbar"> 
      <?php // Create and run custom loop 
       $custom_posts = new WP_Query(); 
       $custom_posts->query('category_name=Content (Front Page)'); 
       while ($custom_posts->have_posts()) : $custom_posts->the_post(); 
      ?> 
      <div class="content-block"> 
       <h2><?php the_title(); ?></h2> 
       <p><?php the_content(); ?></p> 
      </div><!-- .content-block --> 
      <?php endwhile; ?> 
     </div><!-- #mainbar --> 
    </div><!-- .container --> 

参考图片：

奇怪了。

Answer 1

.shadow-bottom { 
    height: 10px; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333), to(#222)); 
    background: -moz-linear-gradient(#333, #222); 
    -pie-background: linear-gradient(#333, #222); 

缺失}http://jigsaw.w3.org/css-validator/是一个有用的工具。

/* Tagline */ 
#tagline { 
}