时间戳

首页 > 解决方案 > 如何为不同的元素组合相同的 CSS 属性？

css - 如何为不同的元素组合相同的 CSS 属性？

问题描述

我有两个元素：tooltip和tooltip-line。每个元素都有共同的属性：

[tooltip]::after, [tooltip-line]::after  {
position: absolute;
opacity: 0;
visibility: hidden;
/* Other common properties */
}

接下来，我对每个元素都有不同的属性。

[tooltip-line]::after  { /* One line tooltip */
    content: attr(tooltip-line);
    white-space: nowrap;
}
[tooltip]::after  { /* Multiline tooltip */
    content: attr(tooltip);
    width: 200px;
    white-space: normal;
}

这是正确的用法吗？包括类似的课程。还是应该将所有属性复制到每个声明块？

标签： cssproperties

解决方案

这是一种不同的方法，可能更具可扩展性。使用 CSS 自定义变量，我们可以通过在类中重置它们来覆盖任何默认类值multiline。最后，如果可能的话，我会让包含工具提示内容的属性相同——并且是有效的数据属性。

.tooltip::after {
  --tooltip-white-space: nowrap;
  
  content: attr(data-tooltip-content);
  white-space: var(--tooltip-white-space);
}

.tooltip.multiline::after {
  --tooltip-white-space: normal;
}

.container {
  width: 250px;
  border: 1px solid red;
}
<div class="container">
  <div class="tooltip" data-tooltip-content="my tooltip content should not wrap no matter what"></div>

  <div class="tooltip multiline" data-tooltip-content="my multliline tooltip content should wrap"></div>
</div>

jsFiddle

推荐阅读