CSS - 添加具有数据属性的颜色 - attr（data-color color） [英] CSS - Add Color with a data attribute - attr(data-color color)

问题描述

我试图添加颜色到不同的元素与我的CSS中的数据属性，但没有工作...

我按照说明： p>

attr（）函数：从编辑的文档收集的属性值。

W3C

HTML

 < table> 
< tr> 
< td> 
< span class =bgborderdata-color =＃e7663f>< / span> 
< i class =fa fa-copy>< / i> 
< / td> 
< td> 
< span> Blaablaaablaaa< / span> 
< / td> 
< / tr> 
< / table> 
< table> 
< tr> 
< td> 
< span class =bgborderdata-color =＃77c385>< / span> 
< i class =fa fa-upload fa-fw>< / i> 
< / td> 
< td> 
< span> Blablaablaaa< / span> 
< / td> 
< / tr> 
< / table> 
  

CSS

  .bgborder {
 display：block; 
 width：5px; 
 height：100％; 
 position：absolute; 
 top：0; 
 background-color：attr（data-color color）; 
} 
  

没有出现...我对吗？

在我的chrome检查器中我有这样：

  background-color：attr ）; 
 /！\无效的属性值
  

我不明白为什么...？

感谢您的帮助：）

解决方案

好主意，请阅读文档： https://developer.mozilla.org/en / docs / Web / CSS / attr

惊喜！ ）

替代方案：如果您知道您的颜色范围有限，请尝试：

  [data-color = red] {background-color：red！important} 
 [data-color = blue] {background-color： blue！important} 
 [data-color = zophan-blue] {background-color：＃33ccff！important} 
  

b $ b

如您所见，这允许灵活性，例如定义自己的颜色;）

I'm trying to add color to different element with a data attribute in my css but doensn't work ...

I follow this instructions :

The attr() Function: Properties Values Collected from the Edited Document.

W3C

HTML

<table>
    <tr>
        <td>
            <span class="bgborder" data-color="#e7663f"></span>
            <i class="fa fa-copy"></i>
        </td>
        <td>
            <span>Blaablaaablaaa</span>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <span class="bgborder" data-color="#77c385"></span>
            <i class="fa fa-upload fa-fw"></i>
        </td>
        <td>
            <span>Blablaablaaa</span>
        </td>
    </tr>
</table>

CSS

.bgborder {
    display: block;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: attr(data-color color);
}

Nothing appears...Am I right ?

In my chrome inspector I have this :

background-color: attr(data-color color); 
/!\ Invalid property value

I don't understand why... ???

Thanks for your help :)

解决方案

Always a good idea to read the documentation: https://developer.mozilla.org/en/docs/Web/CSS/attr

Surprise! If nothing supports it, then it won't work ;)

Alternative: If you know you only have a limited range of colours, try:

[data-color=red] {background-color:red !important}
[data-color=blue] {background-color:blue !important}
[data-color=zophan-blue] {background-color:#33ccff !important}

As you can see, this allows flexibility, such as defining your own colours ;)

这篇关于CSS - 添加具有数据属性的颜色 - attr（data-color color）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！