CSS中如何获取另一个元素的属性值

Question

是否有纯CSS方法来获取不同元素或属性的属性（值）？

这里有一个简单的例子：

1. h6 和按钮是“姐妹”元素。
2. 两者的CSS代码块应该是分开的。
3. 现在之前确定的 h6 字体系列应该用作按钮的字体系列。

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

另一种用法是在不使用 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自定义变量

确保两个或多个元素共享一个

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

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

Answer 3

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

但是，您可以使用同级选择器来设置元素和其同级元素的样式。

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

您可以为指定的选择器拥有单独的代码块

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

如果您想了解有关 CSS

adjacent

和

general

选择器的更多信息，我会参考此链接：W3Schools 组合选择器