如何使用“z-index”作为 CSS 属性选择器？答案

【问题标题】：How can i use "z-index" as an css attribute selector?如何使用“z-index”作为 CSS 属性选择器？
【发布时间】：2012-07-05 09:23:13
【问题描述】：

我需要一个属性选择器来匹配第一个具有 z-index 和值为 0 的 div 元素。 tTis 是我尝试通过在 jquery 中使用 css 属性选择器语法来获取元素的方式：

$("div[z-index='0']").first().doSomeJqueryStuff() ....

在我的文档中，在 div 元素上显式设置了值为 0 的 z-index，但选择器不返回任何结果。感谢您的帮助！

【问题讨论】：

标签： jquery css

【解决方案1】：

试试

$('div').each(function({ 
    if ($('div').css('z-index') === '0') { // or ... === 0
        ....
    }
}

【讨论】：

【解决方案2】：

您可以将属性选择器应用于内联样式属性（* 表示包含）：

div[style*="z-index: 0"]

【讨论】：

【解决方案3】：

不，那是不可能的。您不能以这种方式根据 css 属性 值选择元素。

您应该将 class 或 id 应用到具有您的 CSS 值的元素并使用它来代替，或者 遍历所有元素并检查是否存在 CSS属性（相当昂贵的操作）。

【讨论】：

【解决方案4】：

您使用Sizzle CSS 选择器库。

【讨论】：

【解决方案5】：

您可以逐个检查它们，直到找到第一个 z-index = 0 ：

$('div').each(function({ 
    // Check doc about .css() function
});

【讨论】：

【解决方案6】：

z-index 是 CSS 属性，其值为 0。

CSS 选择器由 HTML（和 SVG，...）id、类、元素、属性、伪和它们的值组成（和 Sizzle，jQuery 的选择器部分的制作方式相同）。这些 CSS 选择器用于编写 CSS 声明 (property: value) 的 CSS 规则，并将设置 HTML 文档的样式。

【讨论】：