我似乎无法为 body 内的标签应用链接样式表属性，因为它似乎不会让我覆盖 css 文件中指定的 body 标签属性，所以级联似乎在情况。 id freeDeliveries 保持与 body 标签相同的样式，除非我内联添加样式属性。为什么？我什至尝试给 body 标签一个 id 并引用它来进行样式而不是 body 元素本身，但它仍然没有用。 freeDeliveries里面的字体还是Dosis，颜色还是白色。
编辑:我从 p 标签中删除了 id="freeDeliveries"属性，并将 p 包装在具有该属性的 div 中，然后在样式表上我添加了 #freeDeliveries p 引用实际的 p 标签本身作为core 标签和后代选择器，而不是引用它的 id 并且最终能够以某种方式覆盖 core body 标签上的值。所以它与实际 html 标签和附加到标签的 id 之间的优先级有关，它需要引用 p 标签本身，因为它比 id 更优先。这就是内联起作用的原因，因为它总是优先于所有内容。如果有人能解释为什么，那将是正确的答案，我可以标记它。注意我没有更改下面的代码，以便您可以看到我之前的代码，并将其与我上面的简单更改的描述拼凑在一起
这是我的链接
<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>
最佳答案
只需将 !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>关于html - 除非内联，否则不应用样式表属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45486565/