相关疑难解决方法(0)

CSS选择器由浏览器引擎从右到左匹配.因此,他们首先找到孩子,然后检查他们的父母,看看他们是否符合规则的其余部分.

1. 为什么是这样？
2. 是因为规范说的吗？
3. 如果从左到右进行评估,它是否会影响最终布局？

对我来说,最简单的方法是使用元素数量最少的选择器.首先是ID(因为它们应该只返回1个元素).然后可能是类或具有最少节点数的元素 - 例如,页面上可能只有一个跨度,因此可以使用引用跨度的任何规则直接到达该节点.

以下是备份我的说法的一些链接

1. http://code.google.com/speed/page-speed/docs/rendering.html
2. https://developer.mozilla.org/en/Writing_Efficient_CSS

这听起来像这样做是为了避免必须看到父母的所有孩子(可能是很多孩子),而不是一个孩子的所有父母必须是一个孩子.即使DOM很深,它也只会在每个级别查看一个节点而不是RTL匹配中的多个节点.评估CSS选择器LTR或RTL更容易/更快？

如何将特定的CSS样式应用于一组元素中的每个(为了参数)奇数元素,同时考虑一组被排除的元素？

此问题在此处复制(显示在codepen中):

http://codepen.io/houdmont/pen/VLOBBG

.foo应用了一类的一系列元素:

<a href="#" class="foo">1. Blue</a>
<a href="#" class="foo">2. Green</a>
<a href="#" class="foo">3. Blue</a>
<a href="#" class="foo bar">4. Hidden (blue)</a>
<a href="#" class="foo bar">5. Hidden (blue)</a>
<a href="#" class="foo bar">6. Hidden (blue)</a>
<a href="#" class="foo">7. Green</a>

当.bar被施加类,元件被隐藏.

我希望应用的剩余元素.foo被设置为奇数/偶数.

尝试如下:

.bar {
    display: none;
}

/**
 * This clearly doesn't work as I'd hoped it would.
 */
.foo:not(.bar):nth-of-type(even) {
    color: green;
}

理想情况下,我希望第七个元素是绿色的,即使它是一个"奇怪的"元素,如果我能够用类排除元素.bar那么它将是第四个元素,因此被认为是"偶数",将颜色设置为绿色.

这可能与CSS有关吗？

我一直在努力制作一张彩色的桌子,其中的行数与奇数行的颜色不同.我唯一的问题是我必须能够使用隐藏的行来执行它,因为例如,如果你隐藏第2行,那么你会看到第1行和第3行的颜色相同.

这就是我所拥有的:

tr:not([display="none"]):nth-child(even){
    background: #EFEFFF;
}
tr:not([display="none"]):nth-child(odd){
    background: #E0E0FF;
}

此代码对我不起作用,因为浏览器不会根据给定的顺序过滤:not和:nth-​​child.有什么建议？