样式是如何继承的
如何使样式具有.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"中获取。