css 样式是如何继承的

cgvd09ve 于 2023-01-27 发布在其他

关注(0)|答案(5)|浏览(140)

如何使一个样式具有.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;
}

css

来源：https://stackoverflow.com/questions/110281/how-is-style-inherited

5条答案

按热度按时间

t98cgbkg1#

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

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

赞(0）回复(0）举报 2023-01-27

fzwojiic2#

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

赞(0）回复(0）举报 2023-01-27

pw136qt23#

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

这就是您所问问题的答案，但我有一种感觉，这不是您所寻找的。也许您应该发布一个标记示例，并告诉我们您希望应用哪些样式，以便我们能够更好地帮助您。

赞(0）回复(0）举报 2023-01-27

yshpjwxd4#

看起来你把事情搞混了。如果你想把第一组括号中的属性应用到". 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>

赞(0）回复(0）举报 2023-01-27

bvn4nwqk5#

我想你的想法有点倒退，所以让我们试着整理一下你使用的语言。

.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”。

赞(0）回复(0）举报 2023-01-27

我来回答

css 样式是如何继承的

5条答案

相关问题

热门标签

最新问答