Question

css在外部样式表上不起作用。

我正在为WordPress创建自定义标头。我已经在本地主机中创建了标头和代码，并且所有内容都与内联css一起正常工作，但是一旦我删除了代码并将其放置在外部样式表上，它就无法正常工作。我想知道为什么我不能只复制内联css并将其链接到外部。

/ === css === /

.header_panel {
    background-image: url("https://www.sellhousefast.uk/resources/purplegreen/template/header_background.v1541099273.png");
    background-repeat: repeat-y;
    margin-left: auto;
    margin-right: auto;
    background-position: center;
}

.inner_content {
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    max-width: 1190px;
  }

  body {
    font-family: 'museo_slab',sans-serif;
    color: #4c2060;
    font-size: 11pt;
}
.header_panel .logo {
    float: left;
    margin-top: 11px;
    margin-left: -7px;
}

fieldset, img {
border: 0;
}
.header_panel .rightinfo {
float: right;
font-size: 16pt;
margin-right: -7px;
}
.header_panel .rightinfo .taglinetel {
float: left;
text-align: right;
box-sizing: border-box;
padding-right: 7px;
margin-top: 15px;
}
.header_panel .rightinfo .taglinetel .tagline, .header_panel .rightinfo .taglinetel .tagline a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.header_panel .rightinfo .taglinetel .tagline, .header_panel .rightinfo .taglinetel .tagline a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.header_panel .rightinfo .taglinetel .telephone_number {
color: #4c2060;
}

标题代码：

<?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 quick_completion
     */

    ?>
          <!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(); ?>
<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</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', 'quickcompletion' ); ?></a>

    <!DOCTYPE html>
        <html>
    <div class="header_panel">
        <div class="inner_content">
         <header>
        <a href="https://www.quickcompletion.net" class="logo"><img src="http://www.quickcompletion.net/wp-content/uploads/2019/01/logo1.png" alt="quickcompletion.net" width="400" height="89"></a>
        <div class="rightinfo">
                        <div class="taglinetel">
                            <div class="tagline"><a href="https://www.quickcompletion.net">Quick Completion</a></div>
                            <div class="telephone_number telephone_number_desktop">
                                <div class="line">Call us FREE on <span class="number"></span></div>
                                <div class="line">Or for local rates <span class="number">0161 907 1594</span></div>
                            </div>
                            <div class="telephone_number telephone_number_mobile">
                                <div class="number">0161 907 1594</div>
                                <!--//<div class="line">Local rates</div>//-->
                            </div>
                        </div>
                        <img src="https://www.sellhousefast.uk/resources/purplegreen/template/code_of_practice.v1541099272.png" alt="Property Buyers - Code of Practice" class="code_of_practice" width="107" height="107">
                    </div>
                    <div class="clear"></div>



        <nav class="page_navigation" id="page_navigation">
            <ul>


         <li>
            <a href="https://www.quickcompletion.net/home/" class="name nav-home selected">Home</a>

                        </li>
                            <li>
    <a href="https://www.quickcompletion.net/faq/" class="name nav-faq nonselected">Stop repossession</a>

                            </li>
                            <li>
    <a href="https://www.quickcompletion.net/why-choose-us/" class="name nav-why-choose-us nonselected">FAQ</a>

                            </li>

                            <li>
    <a href="https://www.quickcompletion.net/testimonials/" class="name nav-testimonials nonselected">Testimonials</a>

                            </li>

                                <li>
        <a href="https://www.quickcompletion.net/contact-us/" class="name nav-contact-us nonselected">Get in touch</a>

                                </li>

                </ul>
                <div class="clear"></div>
             </nav>


                </div>
             <div></div></div>


    <?php
    wp_nav_menu(
    array(
    'theme_location' => 'primary',
    'container' => 'nav',
    'container_class' => 'navbar_collapse collapse',
    'menu_class' => 'nav navbar-nav navbar-left'

    )
    );
    ?>

       </header>


            <!-- Bootstrap core CSS -->
            <link href="assets/css/bootstrap.min.css" rel="stylesheet">

            <!-- Font Awesome Icons -->
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs    /font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.5.0    /css/all.css' integrity='sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU' crossorigin='anonymous'>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

            <!-- Custom CSS -->

            <!-- Google Fonts -->
            <link href="https://fonts.googleapis.com/css?family=Fredoka+One|Libre+Baskerville|Open+Sans|Raleway" rel="stylesheet">

            <link href='http://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet' type='text/css'>

Answer 1

CSS规则将按照声明的顺序应用。您可以使用浏览器的内置开发人员工具检查该元素，并查看正在应用的规则以及从哪个电子表格中获取

。

您还可以在规则的末尾添加!important，以优先于该元素的规则，该规则稍后可能会在另一个样式表中声明。

当放在外部样式表上时，内联css为什么不起作用？

1 个答案: