样式是如何继承的

时间:2020-03-06 14:30:01  来源:igfitidea点击:

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