样式是如何继承的
如何使样式具有.a .b .c中定义的样式的所有属性,除了" background-color"(或者其他属性)以外?这似乎不起作用。
.a .b .c
{
background-color: #0000FF;
color: #ffffff;
border: 1px solid #c0c0c0;
margin-top: 4px;
padding: 3px;
text-align: center;
font-weight: bold;
}
.a .b .c .d
{
background-color: green;
}
解决方案
.a, .b, .c {color: #ffffff; border: 1px solid #c0c0c0; margin-top: 4px; padding: 3px; text-align: center; font-weight: bold; }
.a {background-color: red;}
.b {background-color: blue;}
.c {background-color: green;}
我们可以将.d类选择器添加为第一个规则的选择器,然后添加一个规则以重新定义.d的背景色:
.a .b .c,
.d {
background-color: #0000FF;
color: #ffffff;
border: 1px solid #c0c0c0;
margin-top: 4px;
padding: 3px;
text-align: center;
font-weight: bold;
}
.d {
background-color: green;
}
这就是我们所提出问题的答案,但是我有一种感觉,这不是我们想要的。也许我们应该发布一个标记示例,并告诉我们我们希望应用哪种样式,以便我们更好地。
看来我们那里杂乱无章。如果要将第一组括号中的属性也应用到" .d",则需要在选择器列表中指定该属性。我们还需要用逗号分隔选择器,以便它们成为列表,而不是继承。
例子:
<html>
<head>
<style type="text/css">
.a, .b, .c, .d { background-color: #0000FF; color: #FF0000; border: 1px solid #00FF00; font-weight: bold; }
.d { background-color: white; }
</style>
</head>
<body style="background-color: grey;">
<p class="a">Lorem ipsum dolor sit amet.</p>
<p class="b">Lorem ipsum dolor sit amet.</p>
<p class="c">Lorem ipsum dolor sit amet.</p>
<p class="d">Lorem ipsum dolor sit amet.</p>
</body>
</html>
我认为我们正在考虑这个问题,所以让我们尝试整理一下我们使用的语言。
.a .b .c{
background-color: #0000FF;
color: #ffffff;
}
看上面的CSS,"。a .b .c"部分是选择器,括号之间的部分是样式。该选择器说:"在具有" b"类的元素内部找到具有" c"类的所有元素,并在具有" a"类的元素内部发现所有这些元素"-通常会说页面上的哪些元素将获得所需的外观。
多个选择器可以匹配页面上的同一元素,并且有关于将这些元素应用于该元素的顺序的规则(http://www.w3.org/TR/CSS2/cascade.html)。一个简单的规则是,更多的"特定"选择器会覆盖较少的"特定"选择器。 " div.blueBanner p a:hover.highlight"比" .blueBanner"更具"特定性"。如果两个规则具有相同的特异性,则CSS文件中后面的一个规则将被覆盖。
html范例:
<div class="a">
<div class="b">
<div class="c">foo</div>
<div class="c d">bar</div>
</div>
</div>
因此,我们有一个选择器" .a .b .c"(如上所列),并且页面上的两个元素(foo和bar)与该选择器匹配,因此它们都具有背景色和我们定义的所有其他样式。
现在,我们还希望第二个元素具有绿色背景色。它为它分配了另一个类" d",因此我们可以定义另一个仅与第二个元素" .a .b .d"匹配的选择器,并将其设置为背景色。 " bar"元素仍然从" .a .b .c"选择器中获取所有其他样式(字体,颜色等),但背景颜色从" .a .b .d"中获取。

