Css不会生效,也不会在检查中显示

时间:2018-08-18 作者:Soma

嗨,我正在为我的标题做一件简单的事情https://blog.madesoma.com/, 但我不知道这有什么问题。

.site-header {
    background-color: #473C93; 
}

#branding-logo {
float: left;
width: 50px;
height: auto; 
}
这是我的标题。php文件:

<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package Rumah_Digital
 */

?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( \'charset\' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="site">
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( \'Skip to content\', \'rumah-digital\' ); ?></a>

    <header id="masthead" class="site-header">
        <div class="site-branding" id="branding">
            <img src="https://blog.madesoma.com/wp-content/uploads/2018/08/icon-2088906_1280.png" id="branding-logo"> </img>

            <?php
            the_custom_logo();
            if ( is_front_page() && is_home() ) :
                ?>
                <h1 class="site-title"><a href="<?php echo esc_url( home_url( \'/\' ) ); ?>" rel="home"><?php bloginfo( \'name\' ); ?></a></h1>
                <?php
            else :
                ?>
                <p class="site-title"><a href="<?php echo esc_url( home_url( \'/\' ) ); ?>" rel="home"><?php bloginfo( \'name\' ); ?></a></p>
                <?php
            endif;
            $rumah_digital_description = get_bloginfo( \'description\', \'display\' );
            if ( $rumah_digital_description || is_customize_preview() ) :
                ?>
                <p class="site-description"><?php echo $rumah_digital_description; /* WPCS: xss ok. */ ?></p>
            <?php endif; ?>
        </div><!-- .site-branding -->

        <nav id="site-navigation" class="main-navigation">
            <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( \'Primary Menu\', \'rumah-digital\' ); ?></button>
            <?php
            wp_nav_menu( array(
                \'theme_location\' => \'menu-1\',
                \'menu_id\'        => \'primary-menu\',
            ) );
            ?>
        </nav><!-- #site-navigation -->

    </header><!-- #masthead -->

    <div id="content" class="site-content"> 

3 个回复
SO网友:Jacob Peattie

这是样式表中CSS的相关部分:

/*--------------------------------------------------------------
## Uling dini ke beten, Bapak Ngelah olah2an. Kangguang deen malu! 
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Header 
--------------------------------------------------------------*

.site-header {
    background-color: #473C93; 
}

#branding-logo {
float: left;
width: 50px;
height: auto; 
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
如果你仔细看,你会发现CSS comment 未正确关闭:

--------------------------------------------------------------*
因此,您的CSS被解释为注释。确保你正确地关闭了评论*/.

/*--------------------------------------------------------------
## Header 
--------------------------------------------------------------*/
此外,请使用具有语法高亮显示的编辑器。如果启用了它,问题就显而易见了。

SO网友:Electron

尝试添加img 到您的css。

Example:

#branding-logo img {
float: left;
width: 50px;
height: auto; 
}
Tip: 仅在唯一的elemets上使用ID。对要在其他图元上重用的样式使用类。

目前,您的图像CSS应用了此CSS,这使它变得非常大。

img {
    height: auto;
    max-width: 100%;
}

SO网友:Frank P. Walentynowicz

以你的风格。css文件,您应该具有:

.site-header { background-color: #473C93; }
#branding-logo { float: left; width: 50px; height: auto; }
Tip: 最好使用ID(如果可用)来标识元素。使用:

#masthead { background-color: #473C93; }
#branding-logo { float: left; width: 50px; height: auto; }
如果你看不到想要的效果,那就是那种风格。css已从缓存中读取。在这种情况下,您必须硬加载页面。

结束