我想在我的网站中集成两个CSS文件,但是第二个CSS被忽略。正确调用我的网站时,两个文件都会加载。(根据Chrome开发工具)
我的标题:
<link rel="stylesheet" type="text/css" href="../CSS/theme.css"/>
<link rel="stylesheet" type="text/css" href="../CSS/main.css"/>
该网站的一些代码:
<div class="test">Test</div>
main.css:
.test{
font-size:300px;
}
但这被忽略。仅考虑theme.css的样式。 :( 你能帮忙吗?
这是html文件:
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="application-name" content="FWWA" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>FWWA</title>
<link rel="stylesheet" type="text/css" href="../CSS/theme.css"/>
<link rel="stylesheet" type="text/css" href="../CSS/main.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<a href="/" class="navbar-brand">
<img src="../Logos/FWWA_Logo.svg" alt="Logo FWWA" class="navbar-brand-img" width="100">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" id="navbarLeistungen" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="test">Leistungen</a>
<div class="dropdown-menu dropdown-menu-xl p-0" aria-labelledby="navbarLeistungen">
<div class="row no-gutters">
<div class="col-12 col-lg-6">
<div class="dropdown-img-left" style="background-image: url(../Icons/Code_Icon.svg)">
<h4 class="font-weight-bold text-white mb-0">Want to see an overview?</h4>
<p class="font-size-sm text-white">See all the pages at once.</p>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="dropdown-body">
<div class="row no-gutters">
<div class="col-6">
<h6 class="dropdown-header">Services</h6>
<a href="" class="dropdown-item">Coworking</a>
<a href="" class="dropdown-item">Rental</a>
<a href="" class="dropdown-item mb-5">Job Listing</a>
<h6 class="dropdown-header">Apps</h6>
<a href="" class="dropdown-item">Desktop</a>
<a href="" class="dropdown-item">Mobile</a>
</div>
<div class="col-6">
<h6 class="dropdown-header">Web</h6>
<a href="" class="dropdown-item">Basic</a>
<a href="" class="dropdown-item">Enterprise</a>
<a href="" class="dropdown-item mb-5">Cloud Hostung</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a href="" class="nav-link">Preise</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Beispielprojekte</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Über uns</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Kontakt</a>
</li>
</ul>
</div>
</nav>
<div class="test">Hallo</div>
<script src="../JavaScript/jQ/jquery-3.3.1.min.js"></script>
<script src="../JavaScript/bs/bootstrap.min.js"></script>
</body>
</html>
这是main.css文件:
:root {
--main-blue: #0E2DB7;
--main-green: #09E356;
}
@font-face {
/*for Header/Navbar only */
font-family:'Noto';
src:url('../Fonts/Noto_Sans_HK/NotoSansHK-Black.otf');
font-weight: bolder;
}
@font-face {
/*for Header/Navbar only */
font-family:'Noto';
src:url('../Fonts/Noto_Sans_HK/NotoSansHK-Bold.otf');
font-weight: bold;
}
@font-face {
/*for Header/Navbar only */
font-family:'Noto';
src:url('../Fonts/Noto_Sans_HK/NotoSansHK-Light.otf');
font-weight: lighter;
}
@font-face {
/*for Header/Navbar only */
font-family:'Noto';
src:url('../Fonts/Noto_Sans_HK/NotoSansHK-Medium.otf');
font-weight: 300;
@font-face {
/*for Header/Navbar only */
font-family:'Noto';
src:url('../Fonts/Noto_Sans_HK/NotoSansHK-Light.otf');
font-weight: lighter;
}
@font-face {
/*for Header/Navbar only */
font-family:'Noto';
src:url('../Fonts/Noto_Sans_HK/NotoSansHK-Thin.otf');
font-weight: 100;
}
@font-face {
font-family:'Nunito';
src:url('../Fonts/Nunito/Nunito-Black.ttf');
font-weight: bolder;
}
@font-face {
font-family:'Nunito';
src:url('../Fonts/Nunito/Nunito-Bold.ttf');
font-weight: bold;
}
@font-face {
font-family:'Nunito';
src:url('../Fonts/Nunito/Nunito-Light.ttf');
font-weight: lighter;
}
@font-face {
font-family:'Nunito';
src:url('../Fonts/Nunito/Nunito-SemiBold.ttf');
font-weight: 300;
}
@font-face {
font-family:'Nunito';
src:url('../Fonts/Nunito/Nunito-Light.ttf');
font-weight: lighter;
}
@font-face {
font-family:'Nunito';
src:url('../Fonts/Nunito/Nunito-ExtraLight.ttf');
font-weight: 100;
}
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body{
margin:0;
font-size: 18px;
}
.navbar-brand-img{
max-height: 5rem;
width:100;
height: auto;
}
div .test{
font-size:300px;
}
答案 0 :(得分:1)
css有两个问题。
font-face
缺少花括号div.test
,而不是div .test
。尝试此操作,它应该可以解决您的问题。
干杯!
答案 1 :(得分:0)
如果您正在运行Chrome,则可以在开发人员工具窗口中查找。右键单击.test
元素,然后单击“检查”,然后在“样式”标签中查看以查看themes.css规则的作用。
一种可能性是文件比您更具体地访问元素。
例如:
div.test {
}
优先于
.test {
}
和
div {
}
更极端的方法是将CSS规则设置为:
.test {
font-size: 300px !important;
}
但是最好弄清楚为什么另一个规则具有优先权。