css - 为什么将内联 css 放在外部样式表上时不起作用?
问题描述
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'>
解决方案
CSS 规则将按照它们声明的顺序应用。您可以使用浏览器的内置开发人员工具来检查元素并查看正在应用哪些规则以及来自哪个电子表格。
您还可以添加!important
到规则的末尾以优先于稍后可能在另一个样式表中声明的同一元素的规则。
推荐阅读
- ssl - MacOS Mojave 更新 SSL/TLS (?) 后无法从“https://rubygems.org/”安装 gems
- css - VS 捆绑发布时出现 CSS 缩小错误
- java - 在for循环SQLite android中迭代游标
- dictionary - Golang map的并发访问如何解决?
- email - Google Analytics - 电子邮件跟踪链接点击 - 如何在同一视图中查看所有自定义活动数据(“发送”、“打开”、“点击”)
- python - LSTM,多二进制数组输入和过拟合处理
- php - JQuery 特定问题 - PHP JSON 返回
- python - Python OpenCV VideoCapture read() 无法读取帧
- c - 在 Visual Studio 和 C 项目上运行之间的不一致
- data-mining - 数据挖掘,维度灾难