Question

我试图通过定义<UL>来识别包含菜单列表的所有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[id|='menu']>li>a {color:#f00;}

<a> <li> <ul>直接孩子的直接孩子，其id以menu开头 但它不起作用。

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

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

Answer 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;}

这样可以根据需要在所有菜单上进行着色，同时仍然可以根据需要为任何脚本等提供唯一ID。

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

Answer 2

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

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

请注意，IE＆lt;不支持>选择器。 8。

Answer 3

<强> Here is some detailed info about CSS selectors

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

3 个答案: