除非内联，否则不会应用样式表属性答案

【问题标题】：style sheet properties not being applied unless inline除非内联，否则不会应用样式表属性
【发布时间】：2018-01-11 04:44:49
【问题描述】：

我似乎无法为正文中的标签应用链接样式表属性，因为它似乎不会让我覆盖 css 文件中指定的正文标签属性，因此级联似乎在情况。除非我内联添加样式属性，否则 ID freeDeliveries 保持与正文标记相同的样式。为什么？我什至尝试给 body 标签一个 id 并引用它来设置样式而不是 body 元素本身，但它仍然不起作用。 freeDeliveries里面的字体还是Dosis，颜色还是白色。

编辑：我从 p 标签中删除了 id="freeDeliveries" 属性并将 p 包装在具有该属性的 div 中，然后在样式表上我添加了 #freeDeliveries p 引用实际的 p 标签本身作为核心标签和后代选择器，而不是引用它的 id 并且以某种方式最终能够覆盖核心主体标签上的值。所以它与实际 html 标签和附加到标签的 id 之间的优先级有关，它需要引用 p 标签本身，因为它优先于 id。这就是 inline 起作用的原因，因为它总是优先于一切。如果有人可以解释原因，那将是正确的答案，我可以标记它。注意我没有更改下面的代码，以便您可以看到我之前的内容，并将其与上面对我的简单更改的描述拼凑起来

这是我的链接

<link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet' type='text/css'/>
<link href='StyleSheets/stylesForms.css' rel='stylesheet' type='text/css'/>

我正在从 google 导入一种字体并将其应用于 body 标签，并且我的样式表的路径是正确的，或者我根本看不到任何样式，我会这样做。

样式表

body {
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    background-color:rgb(255,204,153);
    padding:0;
    margin:0;
    overflow-y: scroll;
    min-width:300px;
}

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family:Arial;
    font-size:16px;
    padding:10px;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

html

<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

【问题讨论】：

您的字体样式工作正常。只需使用浏览器的网络监控工具检查样式表是否被下载。并再次验证您的路径
一切都在那里。如果不是这样，我将永远看不到我清楚地看到的 Dosis 字体。但是我不能覆盖在 freeDeliveries p 中设置的字体，除非我内联。但事实并非如此。我不想做内联样式，也不应该这样做
我了解您的问题。只需将 !important 添加到您的字体中。像这样的字体系列：arial !important.
如果你写#freeDeliveries {font-family:Arial !important;}会发生什么？
网络标签说一切都很好

标签： html css

【解决方案1】：

只需将 !important 添加到 freeDeliveries 字体系列。它被 body font-family 覆盖。

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family:Arial !important;
    font-size:16px;
    padding:10px;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

【讨论】：

这读起来更像是一个找不同的游戏，而不是一个答案。你改变了什么？为什么要解决问题？
编辑并添加了对所做更改的描述
小心。 !important 是一个滑坡。这可以通过简单地编写更具体的规则来解决。
刚刚在问题的评论部分添加了解释。请参考@basement
这让我感到困惑。我受过训练， !important 根本不一定那么重要，也不应该被依赖。级联的基本规则应该解决这个问题，但到目前为止还没有。我认为与造型主体元素本身有关。但是什么？

【解决方案2】：

不确定您是否有拼写错误，但在这里我将 #freedeliveries 更改为 CSS 中的衬线字体。查看sn-p。（我评论了我更改字体的地方）。我使用 serif 是因为它更容易看出与 Arial 字体的区别。然而，这里的这条规则适用于任何字体。

body {
    color:#FFF;
    font-family: 'Dosis', sans-serif;
    background-color:rgb(255,204,153);
    padding:0;
    margin:0;
    overflow-y: scroll;
    min-width:300px;
}

header {
    color:#FFF;
    margin:0;
    padding:5px;
    background-color: rgb(0,176,80);
    background-image: linear-gradient(to top, rgb(0,109,42) 10%, rgb(0,189,79));
    display:-webkit-flex;
    display:flex;
}

header h1{
    font-size:24px;
    text-shadow: 2px 1px 2px #22542d;
    padding:0;
    margin:0;
}

header div{
    margin-right:10px;
}

#freeDeliveries {
    color:black;
    font-family: serif; /* changed to serif font. it works */
    font-size:16px;
    padding:10px;
    color: red;
}

#logo{
    width:32px;
    height:32px;
    border-radius:16px;
    border:2px solid rgb(255,106,0);
    background-color:rgb(255,204,153);
    background-image:url(../images/hippo28.png);
    background-repeat:no-repeat;
    background-position:center;
}

<head>
  <link href='https://fonts.googleapis.com/css?family=Dosis:800' rel='stylesheet'>
  <link href='StyleSheets/stylesForms.css' rel='stylesheet'>
</head>
<body>
    <header>
        <div style="width:42px">
            <section id="logo"></section>
        </div>
        <div style="line-height:36px;width:90%">
            <h1>Registration</h1>
        </div>
    </header>
    <p id="freeDeliveries">Register to get 100 free deliveries.</p>
    <p>other content</p>
</body>

【讨论】：

【解决方案3】：

在 CSS 中声明：
@font-face: {font-family: Dosis; src: url('http://www.fonts.googleapis.com/css?family=Dosis:800');

How do I install a custom font on an HTML site

【讨论】：