Question

我有一个非常简单的问题：

是否有一种纯 CSS 方式来获取不同元素或属性的属性（值）？ （是的，我知道 CSS 不是一种实际的编程语言 - 但可能有一个功能，？！）

这里有一个简单的例子：

h6 和 button 是“姐妹”元素。
两者的 CSS 代码块应该是分开的。
现在应该将之前确定的 h6 的 font-family 用作按钮的 font-family。

我不想为此不必要地添加额外的类。

编辑：另一种用法是在不使用 JavaScript 的情况下将对象的宽度定向到对象的高度（通过 % 定义）。

Answer 1

根据您在问题中的描述，CSS 的基本性质将符合您的要求。

H6 和按钮是兄弟。
H6 和按钮根据 HTML 的性质是分开的。
您需要找到 h6 的字体系列，并使用 css 规则将其手动应用于按钮。

当然，除非你问 CSS 是否可以在页面加载后动态读取元素属性，并实时复制它的属性，否则不会。

h6 {
  font-family times;
  color: purple;
  font-size: 1rem;
  margin: 0;
  font-weight: normal;
}
h6, button {
  font-family: arial;  
  color: orange;
  font-size: 2rem;
}

<div class="container">
  <h6>TITLE</h6>
  <button>BUTTON</button>
</div>

Answer 2

您可以在 CSS 中“获得”的唯一信息是元素本身，通过标签、类、id、属性等。

然而，您可以使用兄弟选择器为和元素设置样式。

h6, h6 + button {
  font-family: value;
}

然后您可以为指定的选择器使用单独的代码块

h6 {
  property: value;
}
button {
  property: value;
}

如果您想了解有关 CSS adjacent 和 general 选择器的更多信息，请参阅此链接：W3Schools Combination Selectors

Answer 3

通过使用 CSS custom variables，您可以确保两个或多个元素共享一个 font-family，而无需使用组合器（+、、> 等）。您不能以这种方式使一个元素直接引用另一个元素。

首先，将如下变量添加到像 root pseudo-class 这样的全局可访问选择器中：

:root {
  --main-font-family: times;
}

现在，您可以使用语法 var(--[var-name]) 来引用上述值：

h6 {
  font-family: var(--main-font-family);
  ...
}

button {
  font-family: var(--main-font-family);
  ...
}

这种方法对更复杂的应用程序很有帮助，在我看来，这比让多个具有不同特性的选择器相互覆盖更清晰。

CSS 获取其他元素的属性

3 个答案: