CSS 属性选择器 - 匹配以开头的属性值答案

【问题标题】：CSS Attribute selector - Match attribute values that begin withCSS 属性选择器 - 匹配以开头的属性值
【发布时间】：2012-05-28 01:58:52
【问题描述】：

我试图通过像这样定义ID 来识别所有包含菜单列表的<UL>：

<ul id="menutop">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
<ul id="menumain">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

据我了解，我可以使用：

ul[id|='menu']>li>a {color:#f00;}

（<li> 的直接子代<ul> 的id 的直接子代id 以menu 开头） 但它不起作用。

搜索了一下给我带来了这个[问题][1]，它表明 ID 是一个属性而不是一个属性，所以我不明白为什么它不起作用。我做错了什么？

根据 W3 标准 (http://www.w3.org/TR/CSS2/selector.html#matching-attrs)，这是指向 CSS2 匹配属性和属性值的链接。

【问题讨论】：

火狐 2+。如果它在 IE7+ 中工作会很好，但不是绝对必要的。确实，不错的尼克呵呵

标签： firefox css-selectors css

【解决方案1】：

根据 W3 文档：

[att|=val]
表示具有 att 属性的元素，其值要么正好是 "val"，要么以 "val" 开头紧跟 "-" (U+002D)

http://www.w3.org/TR/CSS2/selector.html#attribute-selectors

这意味着ul[id|='menu'] 正在寻找<ul id="menu-somevalue"/> 或<ul id="menu" />

这可能是它不起作用的原因，因为 menutop 和 menumain 不匹配。

您可以尝试将 ID 重命名为 menu-top 和 menu-main，或者您可以这样做：

<ul id="menutop" class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>
<ul id="menumain" class="menu">
    <li><a href="#">item1</a></li>
    <li><a href="#">item2</a></li>
    <li><a href="#">item3</a></li>
</ul>

还有你的 CSS：

ul.menu li a {color: #f00;}

这将使您在所有菜单 ul 上根据需要进行着色，同时仍使您能够根据需要拥有用于任何脚本等的唯一 ID。

另外，正如 Pekka 所提到的，> 选择器并未得到广泛支持，因此您现在可能需要重新考虑使用它...

【讨论】：

谢谢凯文！我添加了连字符，它就像一个魅力。还根据您的建议删除了>。谢谢:-)
没问题 :) 我建议在多个较旧的浏览器中测试选择器以确保它可以正常工作。如果你使用的是 Windows，你可以试试 MultipleIE，这是一个很棒的 IE 测试工具tredosoft.com/Multiple_IE。它使您可以运行所有较旧的 IE 版本，包括单点版本。如果您运行的是 7 或 8，它至少可以让您覆盖 IE6。您还可以尝试使用 Adobe Browserlab (browserlab.adobe.com/index.html#) 来获得最流行的浏览器渲染，或者当然是广受欢迎的browsershots.org
我在一些浏览器中测试过，结果如下： WORKS: Firefox 3.5.7, IE 8.0.6, Chrome 3.0.195.38, Opera 10.00, Safari 4.0.3。不起作用：IE 6.0.2900 SP2。（一切都在 Windows XP Pro SP3 下测试）。 Kevin，我也在 Windows 上使用 Internet Explorer Collection (finalbuilds.edskes.net/iecollection.htm)。有时我的电脑有点不稳定，我不确定 IE7 是否真的按照它应该的方式渲染它。我会试试Multiple IE。谢谢！

【解决方案2】：

为了确保最大的兼容性，我会给每个 ul 一个类 menu 并使用

ul.menu>li>a {color:#f00;}

请注意，IE > 选择器。

【讨论】：

嗨 Pekka，问题是我想在 XHTML 中使用尽可能少的代码。这就是我尝试使用 ID 值作为选择器的原因——根据 CSS 规范，这应该是可能的。感谢您的选择，我想我需要坚持下去。
我明白你的意思。我没有方便的表格，但 CSS 2.1 支持仍然很糟糕。目前最好坚持使用普通的旧 CSS 2。
+1 表示 > 选择器，我同意这一点。与当前使用的浏览器一起使用存在风险。

【解决方案3】：

Here is some detailed info about CSS selectors

【讨论】：

不错且非常详细的 Sarfraz 帖子！谢谢:)