Question

使用LESS，我需要根据body标签中设置的类设置许多decedent元素的颜色。

e.g

<body class="color-a">
  <h2 class="news-heading">Hi Buddy</h2>
  <p class="news-body">How are you doing?</p>
</body>

我有多种颜色，颜色-a，颜色-b，颜色-c，颜色-d等，最多可达20种不同的颜色。

使用嵌套选择器，每个类写入20次颜色。

e.g。

.color-a .news-heading { color:blue; }
.color-b .news-heading { color:red; }
.color-c .news-heading { color:green; }

写这个的最好方法是什么？

Answer 1

一般答案

如另一个答案中所述，color会自动继承（as this example shows），但假设没有其他设置color元素的h2（您{{1} }}）。如果css将该元素的.news-heading设置为其他位置like this example，那么您需要覆盖。是的，您可以按原样覆盖它，进行20次不同的类调用以显式覆盖（example）每种颜色，但最好在一次调用中执行覆盖，如下面的代码，然后执行无论color color上的内容是什么，因为它会将body视为自己的内容。当然，it will only do so if your selector is high enough in specificity to win the selection battle。

color

现在虽然.news-heading {color: inherit;}（您的特定情况）通常会自动继承，但许多属性不会，但仍可以将color设置为值。 See the listing of what values are allowed and whether inheritance is the default or not.目前，我认为所有属性都可以明确设置为inherit。

因此，对于您的问题，更一般的答案是，对于您想要继承的“一个特定属性”，您可以像上面一样设置它。所以你可以做这样的事情（理论上）：

inherit

See example fiddle.请注意，.myClass { background: inherit; border-style: inherit; border-color: inherit; border-width: inherit; float: inherit; }不同于简单地让父母的background: inherit通过透明子项看到（透明度是默认的;有些人可能认为是继承，但是不）。在the example中，你应该能够看到background为继承它的孩子和那些没有继承的孩子略有转变。这是因为背景实际上是从（在这种情况下）父元素顶部的子元素的左上角重新绘制。

请注意，继承来自 immediate 父级。如果没有先将父级设置为继承，则无法从祖父元素继承。 See this example

Answer 2

默认情况下，颜色已经继承，因此如果您希望body的所有后代具有相同的字体颜色，则在body类上指定颜色就足够了，每个班级名称一次：

.color-a { color: blue; }
.color-b { color: red; }
.color-c { color: green; }

如果您碰巧要排除任何元素，可以在单个单独的规则中指定。例如，如果您希望.news-body保持黑色并且不继承颜色：

.news-body { color: black; }

您只能阻止从父元素继承，而不能阻止子元素的继承，因此虽然这会阻止body颜色传递给.news-body，但.news-body的任何后代都会仍然继承，但是会从这条规则中继承。

这不需要任何特殊的LESS代码。 Inheritance是vanilla CSS的一个功能。

Answer 3

有两种方法可以解决这个问题

1.您可以为每种颜色使用特定的类：

.color-a { color: blue; }
.color-b { color: red; }
.color-c { color: green; }

并在要设置样式化的元素上添加这些类

2.另一种方法是使用Less：

.color-a(){
   color: blue;
}

.news-heading{
  .color-a();
}

如何让所有元素从基类继承一个特定的属性？

3 个答案:

一般答案