我看到的代码的两个主要问题,因为你拥有它。首先,在实际的HTML中,第二个h2标签以而不是关闭。其次,你似乎对CSS的工作原理有些误解。当你有两个'重叠'的规则时,当标签使用它们时,它们会被合并。当两个规则对同一个属性具有不同的值时,CSS有几个技巧来决定保留哪个规则的属性。
第一个诀窍是规则的“权重”,它只是ids数量,然后是类别数量,然后是规则中的HTML标签数量。第二个技巧是!important属性,它告诉count这个规则没有加权。第三招是你在这里遇到的那个。如果两个规则具有相同的权重,则最后定义的优先级应该优先,这意味着在这里,您的两个h2标签将右对齐。你可以在这里寻找更多关于CSS precedence的信息。
无论如何,你可能想要做的是为你的h2标签创建不同的类,这样每个类都有一个类,使它的属性与标准h2标签不同。这可能是这样的:
CSS:
h2 {
color:orange;
}
/* This .right is a class that can be included on any tag, no matter what type,
and then that tag will inherit all these properties. */
.right {
text-align: right;
}
.left {
text-align: left;
}
HTML: