Question

除了直接应用于每个元素之外，我很擅长使用CSS。我想知道我应该怎么做。（从我的实际实现简化，但相对相同）。是否有可能以某种方式继承风格？

我定义了3个div类，每个都在我的页面中定位一个div。我已经省略了这些css，但风格将我的页面划分为3个部分。

div.left{} 
div.center{}
div.right{}

现在，当用户选择其中一个div时，它会突出显示，所以我有css来突出显示它。

div.lefthighlighted{}
div.centerhighlighted{}
div.righthighlighted{}

我现在必须重复从div.left {}到div.lefthighlighted {}的所有样式，并添加要突出显示的样式，并且必须对我定义的所有三种div样式进行此操作。

好的，我在所有这三个div中都有一个标签，我想要的样式与我的应用程序中的所有其他标签不同，但对于高亮显示的div，它们将是相同的。事情变得疯狂。

我最终得到左，中，右的以下内容。最糟糕的部分是所有的标签样式对于左，高亮，中心，中心高亮，右和右高亮是相同的，但我无法弄清楚如何分享所有这些。

 div.left a:link {}
 div.left a:visited {}
 div.left a:active {}
 div.left a:hover {}
 div.lefthighlighted a:link{}
 div.lefthighlighted a:visited {}
 div.lefthighlighted a:active {}
 div.lefthighlighted a:hover {}

请记住，我只是在这里放空括号，但在我的样式表中，我已经定义了一堆样式。有没有办法说出来

div.left a:link {
  inherit div.right a:link;
  or 
  use div.right a:link;
 }

我发现自己复制并粘贴所有相同的样式，只更改类名或父类名。

Answer 1

为元素提供多个类。

<div class="left highlighted">

然后只需在div.highlighted规则集中包含已更改的属性。

Answer 2

您可以使用,（逗号）作为分隔符对样式进行分组。例如：

div.left a:link, div.right a:link {}

/*Newlines don't matter:*/
div.left a:link,
div.right a:link {}

请注意，以下不的工作方式为“预期”：

/*Expecting to select all links under div.left or div.right*/
div.left, div.right a:link {/*FAIL*/}

关于继承的另一个注释。元素从父母继承样式。遇到新的匹配选择器时，父级的样式仍然适用，除非另有定义：

a:link, a:visited, a:active {
    color: red;
    font-size: 16px;
}
a:hover{
    font-size: 20px; /*font-size changed, while the color is still red.*/
}

嵌套CSS样式或继承

2 个答案: