gpt4 book ai didi

html - 除非内联,否则不应用样式表属性

转载 作者:行者123 更新时间:2023-11-28 03:15:48 25 4
gpt4 key购买 nike

我似乎无法为 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com