应用错误收集

仅在将CSS放入特定样式表

时间：2017-02-05 15:56:35

标签： css google-chrome

出于某种原因，当我将此CSS代码放入about.css时，它可以正常工作，但当我将其放入theme.css时，它无效。

无效的CSS代码：

.photo-credits p {
    font-size: 13px;
    font-family: 'PT Sans', 'Archivo Narrow', sans-serif;
    font-style: italic;
    color: #FDFF33;
    text-align: right;
    margin: 0;
    padding-bottom: 10px;
}

HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Paintball</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Styling--->
    <link type="text/css" rel="stylesheet" href="../css/theme.css" />
    <!--Page Styling-->
    <link type="text/css" rel="stylesheet" href="../css/about.css" />
    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i" rel="stylesheet"> </head>

<body>
    <?php include("../html/navbar.php"); ?>
        <div class="container">
            <div class="title">Paintball </div>
        </div>
        <footer class="photo-credits">
            <p>PC: Name</p>
        </footer>
</body>

</html>

我不明白你为什么在JSFiddle上看到b / c，如果我将about.css和theme.css中的css放在一个可用的css文件中。

之前发生了这种情况（当我将所有CSS粘贴到JSFiddle中时它起作用）并且它真的令人沮丧b / c我不想重复代码，但似乎我可能不得不这样做。对此有任何建议真的很感激！

PS：我几乎认为它可能是MAMP，也许在Chrome上令人耳目一新。 B / c我还有另一个事件，在那里我取消了样式表的链接，保存在Brackets上，刷新Chrome，然后再次链接样式表，保存在Brackets上，并在Chrome上刷新，然后我突然添加了CSS。

使用：

MAMP
PHP 5
括号文字编辑器

/*theme.css*/
body {
    font-family: 'Archivo Narrow', sans-serif;
    text-transform: uppercase;
    background-color: #0C0F0A;
    color: #F0F7F4;
    margin: 0;
    font-size: 48px;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0C0F0A;
    position: absolute;
    top: 0;
    width: 100%;
}

.navbar li {
    float: left;
}

.navbar li a {
    display: block;
    color: #F0F7F4;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
    background-color: #F0F7F4;
    color: #0C0F0A;
}

.container {
    margin-top: 82px;
}

.photo-credits p {
    font-size: 13px;
    font-family: 'PT Sans', 'Archivo Narrow', sans-serif;
    font-style: italic;
    color: #FDFF33;
    text-align: right;
    margin: 0;
    padding-bottom: 10px;
}

/*about.css*/
html {
    height: 100%;
}

.container {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-image: url('../images/Team%20Winter.png');
}

.title {
    height: 100%;
    font-size: 550%;
    text-align: center;
    color: #F0F7F4;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Paintball</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Styling--->
    <link type="text/css" rel="stylesheet" href="../css/theme.css" />
    <!--Page Styling-->
    <link type="text/css" rel="stylesheet" href="../css/about.css" />
    <!--Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow:400,400" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i" rel="stylesheet"> </head>

<body>
    <?php include("../html/navbar.php"); ?>
        <div class="container">
            <div class="title">Paintball </div>
        </div>
        <footer class="photo-credits">
            <p>PC: Name</p>
        </footer>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

其实是nvm！我意识到罪魁祸首是Chrome。按shift + command + R刷新页面，然后应用我的CSS样式