gpt4 book ai didi

firefox - CSS 属性选择器 - 匹配以

转载 作者:行者123 更新时间:2023-11-28 10:58:09 26 4
gpt4 key购买 nike

我正在尝试识别所有 <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>idmenu 开头 )但它不起作用。

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

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

最佳答案

根据 W3 文档:

[att|=val]
Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (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 提到的,>选择器并未得到广泛支持,因此您可能需要暂时重新考虑使用它...

关于firefox - CSS 属性选择器 - 匹配以,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2148728/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com