Question

我想在我的网站中集成两个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;
}

Answer 1

css有两个问题。

第4个font-face缺少花括号
应为div.test，而不是div .test。

尝试此操作，它应该可以解决您的问题。

干杯！

Answer 2

如果您正在运行Chrome，则可以在开发人员工具窗口中查找。右键单击.test元素，然后单击“检查”，然后在“样式”标签中查看以查看themes.css规则的作用。

一种可能性是文件比您更具体地访问元素。

例如：

div.test {
}

优先于

.test {
}

和

div {
}

更极端的方法是将CSS规则设置为：

.test {
  font-size: 300px !important;
}

但是最好弄清楚为什么另一个规则具有优先权。

自己的CSS文件被忽略

2 个答案: