gpt4 book ai didi

html - 具有类的 H1 标签继承了 h1 的属性

转载 作者:太空宇宙 更新时间:2023-11-04 11:08:23 26 4
gpt4 key购买 nike

最近在练习CSS的一些基础知识,在学习Class Selectors时发现了一些疑惑,让我很困惑。

我已经声明了 H1 标签的一些样式属性,我还用类声明了 H1 标签的一些样式属性。当我在我的网络浏览器上查看结果时,我发现我的带有类的 H1 标签继承了我的 H1 标签的一个属性。这就是令人困惑的事情。具有类的标签如何继承相同标签但没有类的属性。如果是这样又如何?如果我不想继承其他标签的属性,那我该怎么做呢?

<html>
<head>
<style>
/*styling for h1 tag.*/
h1
{
text-align:center;
color:yellow;
}
h1.class1
{
color:blue;
font-size:30px;
}
h2.class1
{
color:purple;
font-size:25px;
}
h3.class1
{
color:red;
font-size:15px;
}
</style>
<body>
<h1>C.S.S. Class Selector with different tags.</h1>
<hr>
<p>In this example you will see different level of headings with different styles but with same class.</p>
<h1 class="class1">
I am a H1 heading and I have class1 as a class.
</h1>
<h2 class="class1">
I am a H2 heading and I also have class1 as a class.
</h2>
<h3 class="class1">
I am a H3 heading and I also have class1 as a class.
</h3>
</body>
</html>

最佳答案

CSS 是级联的,这意味着您首先声明的是该元素将继承的内容,直到该行后面的另一个声明覆盖它为止。例如,

h1 {
text-align: center;
color: red;
}

有了这个,所有<h1>的字体颜色为红色并居中对齐。如果你给了一个特定的 <h1>一个类,你可以通过 delcaring 来覆盖上面的内容,如下所示:

h1.class1 {
text-align: right;
color: blue;
}

这意味着<h1>与类(class) class1不会居中对齐或红色,它们将右对齐和蓝色。

如果您要从 class1 中省略文本对齐声明,h1class1 的作为一个类,将继承 h1元素的声明,因此它们将居中对齐。您必须覆盖首先声明的内容才能生效。

关于html - 具有类的 H1 标签继承了 h1 的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33798713/

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