CSS值等于另一个值

Question

我想知道CSS中是否有受支持的方法来检查属性的值是否等于另一个属性的值。例如：

<div foo="value" bar="value"></div>

我会寻找类似于这个高级选择器的东西

div[foo=value][bar=value] {
    font-size:16px;
}

而不是手动检查每个的值，我想看看他们是否等同，所以像

div[foo]==[bar] {
    font-size:16px;
}

我不知道有什么方法可以做到这一点，也没有通过搜索Googlebox找到任何方法。我怀疑Javascript可能是要走的路

是否有任何支持的方法来检查这个？

Answer 1

CSS中没有这样的选项。您不能等于其他元素的属性值。你唯一能做的就是在服务器端语言中使用JavaScript / jQuery等。

示例（jQuery）：

if($('div.example').attr('foo') === $('div.example').attr('bar')) {
    $('div.example').css('fontSize', '16px');
}

Answer 2

CSS没有任何此类选项。

Answer 3

css在这里不会有帮助，你可以使用javascript和数据标签

https://jsfiddle.net/2weeqc42/

<div data-foo="foo" data-bar="foo">div content 1</div>
<div data-foo="foo" data-bar="bar">div content 2</div>

带有数据标签的2个div - 在div 1中，值是相同的

$('div').each(function(){
    if ($(this).data("foo") === $(this).data("bar")){
        $(this).css("color","red"); // or do something else
    }
})

我遍历div并检查数据标签的内容是否相同 - 只有第一个变为红色