风格是如何继承的

如何让一个风格具有在.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; 
}

来源

2008-09-21 Joe

你能给我们一个你的标记的例子，并告诉我们你想应用于每个元素的样式吗？我认为这里可能存在对css的根本性误解...... – Prestaul 2008-09-21 04:58:27

你会的.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; 
}

这就是答案到你问过的问题，但我有一种感觉，这不是你想要的。也许你应该发布你的标记的例子，并告诉我们你希望看到什么样的应用，以便我们可以更好地帮助你。

来源

2008-09-21 05:04:34 Prestaul

这就是我最终做的。谢谢！ – Joe 2008-09-21 05:10:03

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

来源

2008-09-21 04:58:59 micahwittman

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

来源

2008-09-21 05:07:06

我想你想这个倒退一点，所以让我们尝试解决你所使用的语言。

.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”中获取背景颜色。

来源

2008-09-21 05:28:04

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

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

来源

2012-10-16 10:30:03 Someone

风格是如何继承的

回答

相关问题