html - 我的标题标签 CSS 在我的 Wordpress 页面构建器中有效，但在我的页脚中无效

Question

出于某种原因，如果我将标题放在页面构建器插件以外的任何地方，我的标题将忽略它们的 CSS。

我在样式表的最顶部使用了以下 CSS:

h1, h2, h3, h4, h5, h6 {
color: #b8b8b8;
font-weight: 500;
}

h1 {font-size:65px;}

h2 {font-size:58px;}

h3 {font-size:42px;}

h4 {font-size:36px;}

h5 {font-size:28px;}

h6 {font-size:22px;}

你可以在下面我的标题中的链接中看到问题，有一个 h1在正常工作的页面顶部，页脚中的 h5 忽略了上面的 CSS。

<header class="header">
    <!-- LOGOS -->
    <a href="#">
        <img class="standard logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2015/12/Lucie_Averill_Photography_Logo-2.png">
        <img class="white logo" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Lucie_Averill_Photography_Logo_White.png"></a>
    <!-- LOGOS -->
    <img class="menu button" src="http://www.lucieaverillphotography.co.uk/wp-content/uploads/2016/01/Menu.png">
    <!-- HEADER NAVIGATION MENU -->
    <nav class="header-nav">
        <div class="menu-header-menu-container">
            <ul id="menu-header-menu" class="menu">
                <li id="menu-item-463">
                    <a href="#">WORK</a>
                    <ul class="sub-menu">
                        <li id="menu-item-584"><a href="#">LANDSCAPES</a></li>
                        <li id="menu-item-473"><a href="#">SEASCAPES</a></li>
                        <li id="menu-item-478"><a href="#">MACRO</a></li>
                        <li id="menu-item-477"><a href="#">CITIES</a></li>
                        <li id="menu-item-475"><a href="#">LONG EXPOSURE</a></li>
                        <li id="menu-item-480"><a href="#">MISCELLANEOUS</a></li>
                    </ul>
                </li>
                <li id="menu-item-10"><a href="#">ABOUT</a></li>
                <li id="menu-item-464"><a href="#">SHOP</a></li>
                <li id="menu-item-923">
                    <a href="#">SOCIAL</a>
                        <ul class="sub-menu">
                        <li id="menu-item-11"><a target="_blank" href="#">FACEBOOK</a></li>
                        <li id="menu-item-924"><a href="#">INSTAGRAM</a></li>
                        <li id="menu-item-15"><a target="_blank" href="#">FLICKR</a></li>
                    </ul>
                    </li>
                <li id="menu-item-14"><a href="#">CONTACT</a></li>
            </ul>
        </div>
    </nav>
</header>

我的样式表按如下方式排队:

    if  (is_page_template('page-templates/full-page.php'))  { 
 wp_enqueue_style( 'lucieaverillphotography-full-page' ,  
  get_template_directory_uri() . 
  '/css/full-page.css'); 
} 
else  { 
 wp_enqueue_style( 'lucieaverillphotography_style',  get_stylesheet_uri() ); 
} 
}    
add_action( 'wp_enqueue_scripts',  'lucieaverillphotography_scripts' );

Answer 1

因为所有其他插件或子主题都会覆盖主样式表

你的插件有标题的 CSS 覆盖了你的主题 CSS

并且您在插件中自定义的 CSS 覆盖了所有内容，这就是插件的工作方式，主要是那些处理设计和样式的插件。

最好的方法是“INSPECT ELEMENT”并检查 CSS 的优先级及其 url。

还有一件事，如果我没记错的话，底部 CSS 覆盖顶部 CSS