为什么这个CSS属性选择器不起作用？

Question

<style>
div [data-endpoint="/one/two/three/"] {display:none}
</style>

<div data-endpoint="/one/two/three/">
    example text
</div>

这里的实时代码示例:http://jsfiddle.net/DDUNp/2/

Answer 1

因为div和data-endpoint属性之间的空格显式指定具有该属性的元素是div; 的后代元素; 删除空间,它的工作原理:

div[data-endpoint="/one/two/three/"] {display:none}

JS小提琴演示.

参考文献:

• CSS选择器,在W3.org