Question

如何通过CSS获取元素本身的颜色？我希望边框颜色与文本本身的颜色相同。

示例HTML：

<span class="status-name" style="color:#ff0000">Max</span>

CSS：

.status-name {
    font-weight: bold;
    border-bottom: 1px solid ???;
}

底部边框现在应该有颜色#ff0000。我尝试了inherit，auto甚至attr(data-color)（与data-color="#ff0000"属性相结合），但所有这些规则都使规则对浏览器无效。

请注意，如果可能的话，我需要通过CSS来解决这个问题，因为页面上有数千个元素，这些类主要通过手机访问。另外我知道通过style设置CSS不是最先进的，但是有数百种不同的颜色值，为每种颜色创建一个自己的CSS类是不合理的，不是吗？

Answer 1

默认情况下，border会继承框的color属性，因此在CSS声明中不设置颜色：

border-bottom: 1px solid;

Answer 2

试试这个：

.status-name {
    font-weight: bold;
    border-bottom: 1px solid;
}

它会自动继承color

Answer 3

// using jquery
$(document).ready
(
   function()
   {
      $('.status-name').each( function(index, element) 
      {
         $(element).css("borderColor", $(element).css('color'));
      }
   }
);

在动态实例中使用Javascript要好得多，并且如果您决定允许不遵循典型CSS规则的更改，将来可以轻松调整此规则。否则，其他答案应该适合您的需要。

CSS：从元素本身获取边框颜色

3 个答案: