Question

除了.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;
}

Answer 1

.a, .b, .c, .d
{
   background-color: green;
}

.a, .b, .c
{
    background-color: #0000FF;
    color: #ffffff;
    border: 1px solid #c0c0c0;
    margin-top: 4px;
    padding: 3px;
    text-align: center;
    font-weight: bold;
}

这是你的意思吗？
定义的顺序非常有意义，因为后者将适用。

Answer 2

.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;}

Answer 3

您可以将.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;
}

这就是你问过的问题的答案，但我觉得这不是你想要的。也许您应该发布一个标记示例，并告诉我们您希望应用哪些样式，以便我们为您提供更好的帮助。

Answer 4

看来你的东西已经混乱了。如果要将第一组括号中的属性应用于“.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>

Answer 5

我认为你正在考虑这一点，所以让我们试着理清你正在使用的语言。

.a .b .c{
 background-color: #0000FF;
 color: #ffffff;
}

查看上面的CSS，“。a .b .c”部分是选择器，大括号之间的部分是样式。那个选择器说'找到我所有的元素都带有一个带有“c”的类，这些元素里面有一个“b”类的元素，这些元素位于带有“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”。

风格如何继承

5 个答案: