Question

我们提供预先填充的WordPress网站，供多个成员在其服务器上使用。主题有一个选择器，他们可以自定义标题颜色和字体。每个成员的品牌都会有不同的颜色。

该网站还包含一个知识库插件，它使用自己的颜色，可以在其界面中进行自定义。相反，我们希望能够根据主题的调色板设置knowedgebase颜色/属性。（最终，我们希望会员只需在一个地方更改主题的颜色，而不是自定义每个插件。）

因此，如果H1全局设置为蓝色，我们希望能够告诉知识库的元素（.kb-header）与H1的颜色相同。

这完全可以通过CSS或Javascript或其他东西来实现吗？

非常感谢！

Answer 1

您可以创建一个元素来继承父元素的属性。例如：

p { color: red; }
a { color: inherit; }

<p>Paragraph with <a href="#">link</a></p>

但是，如果您的.kb-header不是h1的孩子，那么这肯定不适用于您的问题。

相反，您可以使用不同的方法来获得所需的结果。例如custom properties（a.k.a CSS变量）

:root {
  --user-color: red;
}

h1 {
  color: var(--user-color);
}

.kb-header {
  color: var(--user-color);
}

<h1>Title</h1>
<header class="kb-header">This is the header</header>

通过这种方式，您可以输出:root选择器，使用PHP在<head>标记中定义所有自定义属性。而你的CSS将完全独立于它。

Answer 2

如果要继承（面向对象编程），如果html标签没有任何关系，你可以使用SCSS，例如SASS，它是一个文本预处理器，用类似CSS的编码生成CSS你可以使用变量等等。

有关详细信息visit SASS lang webpage我认为这对您的所有项目都有很大帮助。

如果您不想使用SASS，您甚至可以使用javascript（带或不带库）来完成这项工作，因为普通的CSS无法在非相关标签之间有条件地应用样式。

Answer 3

我写过你正在寻找的缩影版。希望这会有所帮助：P

<html>
<style>
h1 {
    background-color: blue;
}
</style>
<body>
<h1>Hey!</h1>
<div class="kb-header">I'm a div :)</div>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    var bgColor = $("h1").css("background-color");
    $(".kb-header").css({"background-color": bgColor});
});
</script>
<body>
</html>

Answer 4

在CSS中，您可以将选择器与逗号组合在一起，并且两者都有一个规则块：
.a, .b { property: value; }。
并且仍然使用其他声明设置一个或另一个选择器（下面的示例）。

当选择器不相关时，会导致维护问题，但是如果它是由主题生成器生成的那么应该没问题（你不想设置那些给定组件的样式但是有明确的文档列表必须用一组颜色设计。

＆＃13;

h1,
.kb-header {
  color: darkred;
}
h1 {
  font-size: 2rem;
}
@media (min-width: 961px) {
  .kb-header {
    border: 1px solid tomato;
}

＆＃13;

<h1>Title</h1>
<p>Unstyled paragraph</p>
<header class="kb-header">This is the header</header>

＆＃13;

您还可以为要使用边框，背景颜色和颜色设置样式的所有元素添加实用程序类：

＆＃13;

/* Theme 1
 Primary color: #0055D0
 Secondary color: #080;
*/

.c-primary {
  color: #0055D0;
}

.bd-secondary {
  border: 1px solid #080;
}

/* Common styles */
h1 {
  font-size: 2rem;
}

.kb-header {
  padding: 1rem;
}

＆＃13;

<h1 class="c-primary">Title</h1>

<header class="kb-header bd-secondary c-primary">This is the header</header>

＆＃13;

其他答案谈论Sass环境（或其他预处理器，如PostCSS和LESS）和CSS＆＃34;变量＆＃34; （如果你不必支持IE11和Edge~15 + Saf（iOS和OS X）等旧版浏览器，9.2 https://caniuse.com/#search=custom%20prop也是解决问题的好方法恕我直言。

我可以使元素继承其他元素的属性吗？

4 个答案: