关键词：
【中文标题】CSS 选择器仅针对直接子代而不是其他相同的后代【英文标题】：CSS selector for targeting only immediate children and not other identical descendants 【发布时间】：2010-10-18 10:37:51 【问题描述】：我有一个嵌套的可排序列表，可以动态添加或删除项目，并且可以嵌套 n 级深。在嵌套时，一个新的 ul 元素被注入到任何被选为父元素的 li 元素中。列表的初始状态如下所示：
<ul id="parent">
<li id="One"><a href="" class="listLink"><span class="position">1</span>One</a></li>
<li id="Two"><a href="" class="listLink"><span class="position">2</span>Two</a></li>
<li id="Three"><a href="" class="listLink"><span class="position">3</span>Three</a>
<ul>
<li id="A"><a href="" class="listLink"><span class="position">1</span>A</a></li>
<li id="B"><a href="" class="listLink"><span class="position">2</span>B</a></li>
<li id="C"><a href="" class="listLink"><span class="position">3</span>C</a></li>
<li id="D"><a href="" class="listLink"><span class="position">4</span>D</a></li>
<li id="E"><a href="" class="listLink"><span class="position">5</span>E</a></li>
<li id="F"><a href="" class="listLink"><span class="position">6</span>F</a></li>
</ul>
</li>
<li id="Four"><a href="" class="listLink"><span class="position">4</span>Four</a></li>
<li id="Five"><a href="" class="listLink"><span class="position">5</span>Five</a></li>
<li id="Six"><a href="" class="listLink"><span class="position">6</span>Six</a></li>
</ul>
我正在使用 MooTools 进行排序等，它工作正常，但我在排序时无法正确重置位置文本。我尝试使用的每个 CSS 选择器还包括 all 的子元素，而不仅仅是属于列表中的 li 元素，而不是任何属于子列表的元素。假设除了 id、position 和 text，所有列表中的每个 li 元素都与其他所有元素相同。是否有只获取直系子女的选择器？还有另一种方法可以做到这一点吗？
我尝试了一些像上面提到的子选择器：
ul > li 将选择 所有 ul 子元素的 li 元素，而不仅仅是直接子元素
#parent > li 和上面一样。
这是我当前在删除项目时正在运行的函数，它不处理排序，工作正常，只是更新位置。注意它也是 MooTools 语法：
var drop = function(el)
el.getParents('ul').reverse().each(function(item)
var posCount = 1;
item.getElements('li a span[class=position]').each(function(pos)
pos.set('text', posCount);
posCount++;
);
);
目前，更改主级别的任何项目顺序都会重新编号 1-12，甚至是子列表。更改子列表中的任何项目都会为该列表提供正确的编号，但会导致父列表错误地计算编号中的所有子 li 元素。
我觉得这是一个丑陋的 hack，但它确实有效：
var drop = function()
var ulCount = 1;
$$('ul').each(function(item)
if(item.get('id') != 'parent')
item.set('id', 'id-'+ulCount);
var elId = item.get('id');
var posCount = 1;
$(document).getElements('#'+elId+'>li>a>span[class=position]').each(function(pos)
pos.set('text', posCount);
posCount++;
);
ulCount++;
);
【问题讨论】：
【参考方案1】：ul > li
只做直接的孩子。因此，例如，只做您可以使用的***列表元素：
#parent > li
注意：这在 IE6 上不受支持。
向后兼容的常见解决方法是执行以下操作：
#parent li /* style appropriately */
#parent li li /* back to normal */
这更乏味，因为您必须应用样式然后将其关闭（您可能不一定知道旧值是什么），但这是唯一对 IE6 友好的纯 CSS 解决方法。
编辑：好的，你有一个 MooTools 特定的问题。 getElements() 返回所有后代，而不仅仅是直接子代。尝试使用getChildren()。
var drop = function(el)
el.getParents('ul').reverse().each(function(item)
var posCount = 1;
item.getChildren("li").getElements("a span[class=position]").each(function(pos)
pos.set('text', posCount);
posCount++;
);
);
或类似的东西。
【讨论】：
谢谢，但 MooTools 处理 IE6 问题，所以这不是我想要的。我正在寻找一种方法来重置跨度的文本以指示该列表的正确位置，而不是父或子列表，这就是问题所在。 #parent > li 绝对只做直接的孩子。如果那不起作用，您还有其他事情要做。可能需要更多信息。 MooTools 允许我使用 CSS3 选择器，但由于我无法仅更改直接子级，它也会错误地更改我所有子列表的数字。 感谢您的帮助。我最终做了类似的事情。 无论出于何种原因，#parent > li 显然不是有效的 CSS。 Chrome 确实抱怨过它，所以我在规范中查找了它，果然它只允许格式为 E > F 的通用元素名称（无 id 选择）。【参考方案2】：
原始问题没有得到回答。 :only-child 仅在独生子女没有后代时才有效。原始帖子表明包含后代子代是由于 ul>li 而实际上是由于 :only-child 中的一个错误。矛盾的是 :first-child 选择具有后代子代的列表中的第一个孩子，就像 last-child 一样，但 :only-child 没有。我在 Firefox、Opera 和 Chrome 中检查了这一点。这是一个例子：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8">
<style>
.list>ul>li:only-child color:red
.list>ul>li:first-child color:green
.list>ul>li:last-child color:blue
</style>
</head>
<body>
<div class="list">
<ul><li>Item one</li><ul>
<l>Subitem one</li>
<li>Subitem two</li></ul></li><!--<li>Item two</li>
<li>Item three</li>-->
</ul></div>
</body></html>
要激活 :first-child 和 :last-child 规则，请取消注释最后两项。因此，Selectors Level 3 standard 的实现在主流浏览器中是不一致的。当存在 :only-child 规则并且唯一的孩子有后代时，不应激活 :first-child 规则。在示例中，唯一的孩子应该是红色的，但它是绿色的。
【讨论】：
0523css知识点
高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器后代选择器使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）.father.item.ap{color:red;}子代选择器使用>表示子代选择器。比如di... 查看详情
03-css中的选择器
高级选择器分为：后代选择器子代选择器并集选择器交集选择器 后代选择器使用空格表示后代选择器,顾名思义 父元素的后代(包括儿子,孙子,重孙子)中间空格隔开是后代1.containerp{2color:red;3}4.container.itemp{5color:yellow;6}格式:... 查看详情
css选择器（子元素和后代元素选择器）
...兄弟元素：拥有相同父元素的元素叫做兄弟元素 后代选择器 作用：选中指定元素的指定后代元素 语法：祖先元素后代元素{}（中间有空格） 查看详情
jQuery：后代选择器仅适用于一个“隐藏”的 div
】jQuery：后代选择器仅适用于一个“隐藏”的div【英文标题】：jQuery:Descendantselectorsonlyworkingonone"hidden"div【发布时间】：2013-01-1803:48:28【问题描述】：大家好，也许你可以帮忙。我正在使用标准jQueryUI构建一个简单的选项... 查看详情
css选择器
选择器：让我们可以更加精确的选择，自己想要设置样式的标签（选择标签）1、标签名选择器直接用标签名作为该选择器的名字2、类选择器3、id选择器4、后代选择器父代与子代之间用空格隔开5、群组选择器同时选择多个具有... 查看详情
使用 jQuery 获取不是具有特定 CSS 类的容器的子元素的元素的后代
...】：2012-01-0405:43:08【问题描述】：我有一种情况，我需要选择某个元素的所有后代，但排除那些是容器的子代，该容器等于我运行选择器的容器的CSS类。相当复杂的描述 查看详情
css选择器
css选择器CSS选择器回顾符号说明用法#idId选择器#id{color:red;}.class类选择器.class{//}Element标签选择器P {//}*通配符选择器配合其他选择器来使用,并集选择器div,p{} 空格后代选择器divspan{}选择div下面所有后代的span>子代选择器d... 查看详情
css第二天
一丶选择器作用：找标签● 后代○ 选择所有的后代标签○ 写法：空格● 子代○ 选择儿子标签○ 写法：>● 并集○ 选中多组标签设置相同样式○ 写法：逗号（，） ● 交集○ 既... 查看详情
css选择器
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。包含（后代）选择器，即空格,用于选择指定标签元素下的后辈元素。区别:{子选择器（childselector）仅是指它的直接后代，或者你可以理解为作用于子元素的第... 查看详情
03-高级选择器(代码片段)
高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器后代选择器使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）.containerpcolor:red;.container.itempcolor:yellow;子代选择器使用>表示子... 查看详情
css中包含（后代）选择器与子选择器的区别
子选择器：即大于号（>），用于选择指定标签元素的第一代子元素。.span>li{XXXX}。包含（后代）选择器：即加入空格，用于选择指定标签的后辈元素。.fisrtspan{XXXX}。注意：这个选择器与子选择器的区别，子选择器（childselect... 查看详情
03-高级选择器(代码片段)
高级选择器分为：后代选择器、子代选择器、并集选择器、交集选择器后代选择器使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）1.containerp2color:red;34.container.itemp5color:yellow;6ViewCode 子代选择... 查看详情
03-高级选择器(代码片段)
高级选择器分为：后代选择器子代选择器并集选择器交集选择器后代选择器使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子）1.containerp2color:red;34.container.itemp5color:yellow;6ViewCode 子代选择器使用&g... 查看详情
前端之css——css选择器
本周学习CSS的选择器。工作中最常使用的就是元素选择器，ID选择器，类选择器，后代选择器。还有一些并不常用但是功能强大的选择器容易被忽视，这次学习总结下。1.后代选择器和子代选择器后代选择器：element1 element2，&... 查看详情
CSS 性能：后代选择器还是两个直接后代选择器最好？
】CSS性能：后代选择器还是两个直接后代选择器最好？【英文标题】：CSSperformance:descendentortwodirectdescendentselectorsbest?【发布时间】：2015-06-2723:19:20【问题描述】：给定以下HTML：<ul><li><a...对于同一组声明，考虑到它们... 查看详情
css后代选择器和子选择器的区别
...乃至千秋万代而子那肯定就只是指儿子咯 参考技术B后代选择器包含了之后的所有层级，子选择器只包含一个层级 参考技术C回答您好，您的问题我已经看到了，正在整理答案，请稍等一会儿哦~类选择器和后代选择器的区别1.子... 查看详情
抓取不是其他节点后代的节点，不包括当前上下文
...道如何真正表达这个问题。我想要一个节点列表，并且只选择一个节点，而不是嵌套节点。例如：<root><my_element><m 查看详情
web@css高级选择器,基本css样式
1.高阶选择器:子代后代，相邻通用兄弟，交集并集，属性，伪类，伪元素子代后代选择器 div>p{} divp{}相邻通用兄弟 div+p{} div~p{}理解：div同学的同桌p div同学的【同学（有p的）】交集并集选择器 div,p &n... 查看详情