Question

我想选择至少有N个孩子使用CSS的节点。怎么样？

目的是在树中应用色带（“指南”），但前提是父母下面有六个或更多节点。

我得到的JS，JQuery和服务器端脚本建议有些问题，因为孩子们使用Ajax调用动态加载最多。我必须破解注入孩子的代码，例如为有6个以上孩子的父母添加课程。这就是为什么我想问一下是否有一种纯粹的CSS方式来做这件事，然后才用代码做出努力。无论孩子数量如何，我可能只会满足于乐队 - 不是很整洁而是足够公平。

Answer 1

我建议使用jQuery if语句来计算节点，然后添加一个类来应用你想要的样式。

以下是一个工作示例：http://jsfiddle.net/WarrenBee/YeJyy/5

$(document).ready(function() {

    var nodeCount = $('.node').length;

    if( nodeCount > 6 ) {
        $('.node').addClass('nodeStyles');
    }

});

Answer 2

这不是严格可行的，因为CSS没有提供任何基于子项属性选择父项的方法。

对于严格的CSS解决方案，我会在父元素中添加一个类，并为该类设置样式。您可以在服务器端以编程方式处理它，而不是在必要时手动添加类。

您当然可以使用JavaScript执行此操作，并且许多可用的JavaScript库将简化该过程。

Answer 3

CSS have no parent selectors of any kinds yet

但是，您可以使用JavaScript来执行此操作。以下是jQuery示例（Fiddle）：

HTML

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

JavaScript的：

jQuery(function($){
    $('ul').each(function(){
        if($(this).children('li').length >= 6){
            $(this).css('background-color', 'orange');
        }
    });
});

Answer 4

好吧css3有一些孩子选择器可以完成这项工作。

li:first-child:nth-last-child(6),
li:first-child:nth-last-child(6) ~ li {
    ... some style
}

对于这个解决方案，可以归功于发现它的AndréLuís。当然它不适用于父元素，因为那是css4而不支持。但是，如果有6个标记，或者只是第一个li标记，则可以设置所有li标记的样式。

与之前的伪元素组合，您可以直观地制作父样式。 ul得到position:relative。然后，您可以使用伪元素伪造父级样式：

li:first-child:nth-last-child(6):before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:400px;
  height:20px;
  background:green
}

每个浏览器都不支持css选择器nth-last-child，但对于Internet Explorer，您可以使用javascript或IE7.js.祝你好运。

至少有N个孩子的节点的CSS选择器？

4 个答案: