这可能是一个比我所说的更普遍的问题,但我想尽可能具体。我不确定如何将 jsFiddle 与 Polymer 以及所有导入一起使用,但我希望一些代码示例就足够了。
我有一个如下所示的核心菜单:
<core-menu>
<core-submenu label="First submenu">
<core-item label="Test submenu item 1">
<core-item label="Test submenu item 2">
<core-item label="Test submenu item 3">
<core-item label="Test submenu item 4">
</core-submenu>
<core-submenu label="Second submenu">
</core-submenu>
</core-menu>
我想做的是在子菜单中为 core-item
设置不同于 core-submenu
本身的样式。 core-submenu core-item
选择器在 Chrome 中有效,但在 Firefox 中它也会选择文本“First submenu”和“Second submenu”。
我查看了 firefox 开发工具,看起来 Polymer 正在创建这种 DOM 树:
<core-menu>
<core-submenu>
<core-item><div id="label">First submenu</div></core-item>
<core-menu id="submenu">
<core-item>Test submenu item 1</core-item>
...
所以,我尝试了有效的#submenu core-item
,但现在我遇到了相反的问题! Chrome 现在找不到这些元素,因为 polyfill 没有将 submenu
id 添加到 core-submenu
标签。我已经尝试了一个小时来寻找一个适用于两种浏览器的选择器(或一组选择器)。有帮助吗?
最佳答案
我希望这不是唯一的答案,因为它真的很难看,但是这个选择器起作用了。
core-submenu core-item:not(:only-of-type), #submenu core-item
这是它起作用的原因:
Chrome
<core-menu>
<core-submenu>
#shadow-root
<core-item>Submenu 1</core-item>
<core-item>Item 1</core-item>
...
火狐
<core-menu>
<core-submenu>
<core-item>Submenu 1</core-item>
<core-menu>
<core-submenu>
<core-item>Item 1</core-item>
...
所以 :not(:only-of-type)
排除了 shadow DOM 中的 chrome 版本的核心项,而 #submenu core-item
找到了所有(甚至是单项子菜单)Firefox 中的子菜单核心项。
用这个解决方案背负了几磅技术债,所以我希望比我聪明的人找到更好的解决方案!现在摸索应用程序中其余的样式选择器...
关于css - Firefox 中的 polymer 核心子菜单样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25734090/