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

我试图通过如下定义

ID

来识别包含菜单列表的所有

：

<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提供一个类
菜单
，并使用

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

请注意，IE不支持
选择器。
根据W3文档：

[att|=val]


表示具有att属性的元素，其值为“val”或以“val”开头，后跟“-”（U+002D）


这意味着
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>

这将使您能够根据需要在所有菜单ul上着色，同时还可以根据需要为任何脚本等提供唯一的ID

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

.
Hi Pekka，问题是我希望在XHTML中使用尽可能少的代码。这就是为什么我尝试使用ID值作为选择器——根据CSS规范，这应该是可能的。谢谢你的选择，我想我需要坚持下去。我明白你的意思。我手头没有这张表，但是CSS 2.1支持仍然很糟糕。最好暂时坚持使用普通的CSS 2，>选择器使用+1，因为我同意这一点。在当前使用的浏览器中使用存在风险。Firefox 2+。如果它能在IE7+中工作就好了，但不是严格必要的。真的，很好的尼克·海瑟汉克斯·凯文！我添加了连字符，它就像一个符咒。还根据您的建议删除了
。谢谢：-）没问题：）我建议在多个旧浏览器中测试选择器，以确保其正常工作。如果您使用的是Windows，您可以尝试MultipleIE，这是一个很棒的IE测试工具。它允许您运行所有较旧的IE版本，包括point版本。如果你运行7或8，它至少可以让你覆盖IE6。您也可以尝试使用Adobe Browserlab（）进行最流行的浏览器渲染，当然也可以是我在一些浏览器中测试过的最流行的渲染，结果如下：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集合（）。我的电脑有时会有点不稳定，我不确定IE7是否真的像它应该的那样渲染它。我要试试看。谢谢好的，非常详细的帖子！谢谢：）
<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>

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