Question

CSS是否可以根据另一个属性的值进行匹配？例如：

<div data-attr1="abc" data-attr2="def"></div>
<div data-attr1="abc" data-attr2="abc"></div>

我想要这样的东西（不起作用）：

div[data-attr1=data-attr2]

理想情况下，返回第二个DIV，但不是第一个。

Answer 1

你不能用CSS做到这一点。使用JavaScript（jQuery），您可以这样做：

#find amount of bob(s) in the string
s = 'azcbobobegghakl'
count = 0
for letter in s:
    if letter == 'bob':
        count += 1

print count

其中var dataAttr = new Array(); $.each($("[data-attr1]"), function(i, el){ if($(el).attr("data-attr1") == $(el).attr("data-attr2")){ dataAttr.push(el); } }); console.log($(dataAttr));将包含dataAttr以及<div data-attr1="abc" data-attr2="abc"></div>等于其data-attr1的任何其他div。

Answer 2

不，CSS没有。您将需要使用JavaScript，或者当其他两个属性匹配时，让生成HTML的任何内容添加类或标记属性。

Here's the latest selectors specification;该部分将是attribute selectors，但那里没有那样的东西。

Answer 3

你可以使用jQuery：

if ($('div').attr('data-attr1') == $('div').attr('data-attr2'))

CSS匹配属性值与另一个

3 个答案: