标签: css-selectors

可能重复:
CSS规则中的">"是什么意思？

我已经看过>几次在CSS代码中使用的"大于"(),但我无法弄清楚它的作用.它有什么作用？

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更容易/更快？

是否可以通过HTML5数据属性选择CSS中的元素(例如data-role)？

我正在寻找下表的CSS选择器:

Peter    | male    | 34
Susanne  | female  | 12

是否有任何选择器匹配所有包含"男性"的TD？

例如:

div > p.some_class {
  /* Some declarations */
}

这个>符号究竟意味着什么？

有没有办法根据设置为两个特定类的类属性的值来选择具有CSS的元素.例如,假设我有3个div:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

我可以写什么CSS来选择列表中的第二个元素,基于它是foo和bar类的成员这一事实？

可能重复:
是否有CSS父选择器？

有没有办法使CSS选择器匹配以下？

All OBJECT elements
  which have a PARAM element inside of them

选择器

OBJECT PARAM

不起作用,因为它匹配PARAM,而不是OBJECT.我想将{display:none}应用于对象; 将它应用于PARAM是没用的.

(我知道我可以用jQuery - $("object param").closest("object")和VanillaJS - 来解决这个问题document.querySelector("object param").closest("object")- 但我正在尝试在页面上创建CSS规则.)

如何递归选择所有子元素？

div.dropdown, div.dropdown > * {
    color: red;
}

此类仅在已定义的className和所有直接子项上抛出一个类.你怎么能以一种简单的方式选择所有这样的childNodes:

div.dropdown, 
div.dropdown > *, 
div.dropdown > * > *, 
div.dropdown > * > * > *, 
div.dropdown > * > * > * > * {
    color: red;
}

如何使用CSS选择器定位"text"类型的输入字段？

我有一个元素列表,其样式如下:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

输出One | Two | Three | Four | Five |而不是One | Two | Three | Four | Five

任何人都知道如何选择CSS除了最后一个元素？

您可以在此处查看:not()选择器的定义