开发者

CSS selector affects HTML element when is defined in a section of the CSS file but not in another?

开发者 https://www.devze.com 2023-02-09 18:03 出处:网络
The CSS selector .content-block affects the .content-block div in this section: #branding, #mainbar, #accordion, .content, .content0, .content-block, .posts, #footer a {

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:

CSS selector affects HTML element when is defined in a section of the CSS file but not in another?

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 {
}
0

精彩评论

暂无评论...
验证码 换一张
取 消