Question

如何向div添加两个数据过滤器？如何使用数据过滤器同时选择两个过滤器？

这是我没有运气的尝试：

多个数据过滤器

<div data-filter="red blue green"></div>

多个标签：

 <a href="#" data-filter="blue, red" tabindex="-1">BLUE&RED</a>

这是一个例子：

http://jsfiddle.net/joshvogt/UybPY/

Answer 1

HTML：

<section>
    <a href="#" data-filter="all" tabindex="-1">ALL</a>
    <a href="#" data-filter="red" tabindex="-1">RED</a>
    <a href="#" data-filter="green" tabindex="-1">GREEN</a>
    <a href="#" data-filter="blue" tabindex="-1">BLUE</a>
    <a href="#" data-filter="red,green" tabindex="-1">RED & GREEN</a>
    <a href="#" data-filter="green,blue" tabindex="-1">GREEN & BLUE</a>
    <a href="#" data-filter="blue,red" tabindex="-1">BLUE & RED</a> 
    <div data-filter="red"></div>
    <div data-filter="blue"></div>
    <div data-filter="red"></div>
    <div data-filter="blue"></div>
    <div data-filter="green"></div>
    <div data-filter="red"></div>
    <div data-filter="red"></div>
    <div data-filter="red"></div>
    <div data-filter="blue"></div>
    <div data-filter="green"></div>
    <div data-filter="blue"></div>
    <div data-filter="green"></div>
    <div data-filter="green"></div>
</section>

CSS：

section {
    display:block;
    float:left;
    border:2px solid green;
    min-height:300px;
    width:100%;
    border-radius:4px;
}
a {
    display:block;
    float:left;
    width:25%;
    text-decoration:none;
    text-align:center;
    padding:5px 0;
    color:white;
    background:#1271C7;
}
div {
    display:block;
    float:left;
    height:40px;
    width:40px;
    border:1px solid black;
    margin:10px;
    -webkit-transition:all .8s linear;
    -moz-transition:all .8s linear;
    -o-transition:all .8s linear;
    -ms-transition:all .8s linear;
    transition:all .8s linear;
    margin-top:20px;
}
div[data-filter="red"] {
    background:red;
}
div[data-filter="green"] {
    background:green;
}
div[data-filter="blue"] {
    background:blue;
}
a:focus[data-filter] {
    opacity:.8;
    outline:none;
}
/*
    I grouped selectors since rules are the same
*/
a[data-filter="blue,red"]:focus ~ div:not([data-filter="red"]):not([data-filter="blue"]),
a[data-filter="red,green"]:focus ~ div:not([data-filter="red"]):not([data-filter="green"]),
a[data-filter="green,blue"]:focus ~ div:not([data-filter="green"]):not([data-filter="blue"]),
a[data-filter="red"]:focus ~ div:not([data-filter="red"]),
a[data-filter="green"]:focus ~ div:not([data-filter="green"]), 
a[data-filter="blue"]:focus ~ div:not([data-filter="blue"]) {
    height:0px;
    width:0px;
    border:none;
    margin:0;
}

在这里演示：http://jsfiddle.net/pixshatterer/ZPx7e/

你可以注意到两件事：

1）元素中的data-filters属性没有任何相关性，唯一重要的是将正确的属性设置为a：focus的选择器

2）选择多个属性不是一个选项 - 还是 - 用于：非伪选择器。但是你可以如上所示链接它们，所以不应该

div:not(x,y,z)

它应该是

div:not(x):not(y):not(z)

Answer 2

您可以尝试使用CSS选择器＆＃34;包含＆＃34; *=。例如，在此设置中

div {
   width:100px;
   height:100px; 
   border: solid 1px black 
}

div[data-filter*="red"]:hover {
    background-color:red;
}

div[data-filter*="green"]:hover {
    border: solid 4px green
}

<div data-filter="red blue green">1</div>
<div data-filter="red blue">2</div>
<div data-filter="blue green">3</div>

第二个CSS类将选择第一个和第二个DIV，而第三个CSS类将选择第一个和第三个div。

演示：http://jsfiddle.net/7QK54/

数据属性有多个子类别标签？

2 个答案: