CSS selector affects HTML element when is defined in a section of the CSS file but not in another?
The CSS selector .content-block
affects the .content-block div
in this section:
#branding, #mainbar, #accordion, .content, .content0, .content-block, .posts, #footer a {
margin-left: 10px !important;
margin-right: 10px !important;
}
But is not in this one:
.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 file:
/* 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 file:
<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 -->
Reference picture:
Strange indeed.
.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);
Missing }
http://jigsaw.w3.org/css-validator/ is a useful tool.
/* Tagline */
#tagline {
}
精彩评论