相关疑难解决方法(0)

有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子？例如,我想选择每个奇数表行,但是在行的子集中:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().

有人可以解释原因吗？

是否有可能让第n个子伪选择器与特定类一起工作？

看到这个例子:http: //jsfiddle.net/fZGvH/

我希望第二个DIV.red转红色,但它不会按预期应用颜色.

不仅如此,当你指定它时,它会将第5个DIV更改为红色:

div.red:nth-child(6)

指定此项时,它会将第8个DIV更改为红色:

div.red:nth-child(9)

这似乎是落后的一个DIV.示例中只有8个DIV标记,因此我不知道为什么nth-child(9)甚至可以正常工作.使用Firefox 3.6进行测试,但在我的实际生产代码中,Chrome中出现同样的问题.我不理解这应该如何工作,希望澄清.

此外,这会将第6个DIV更改为红色,但我真正想要的是将第二个DIV.red更改为红色:

div.red:nth-of-type(6)

我不明白为什么nth-child()和nth-of-type()的响应不同,因为文档中只有八个相同类型的标签.

我可以像这样设计每个第4个"项目"div

  jQuery(".item:nth-child(4n)").addClass("fourth-item");

并且工作正常,但后来我隐藏了一些项目,显示了其他一些项目,并希望重新做这个样式,但只有每个第四项可见的样式.所以我有一个将删除这个样式并重新应用它的函数,但我需要在重新应用样式时指定它只是每隔4个可见项目,而不是每个第4个项目.我知道":visible"选择器,但是没有看到用正确的nth-child选择器链接它,任何想法？

我尝试过这样的各种事情无济于事......

jQuery(".item").removeClass("fourth-item");
jQuery(".item:visible:nth-child(4n)").addClass("fourth-item");

我有一些行为与提供的代码片段相同.我有一个项目列表,当选择一个项目时,我希望那个项目显示在列表的顶部,我可以通过flex命令轻松完成.一次只能选择一个.但由于每个列表元素都有边框,因此最后一个元素不应该有边框.li:last-of-type在大多数情况下,只使用工作正常,除非它是最后选择的列表项.

我已经尝试了几个选择器,它们应该选择没有给定类的无序列表中的最后一个列表项,但last-of-type选择器似乎没有正常运行.

如果代码中不清楚,我所指的选择器是.selection li:not(.selected):last-of-type.问题是列表底部的双边框.它应该是来自无序列表元素的单个边框.

.selection ul {
  display: flex;
  flex-direction: column;
  border: .15rem solid #666;
}

.selection li {
  order: 2;
  border-bottom: .15rem dashed #666;
}

.selection li.selected {
  order: 1;
}

/** This selector should work in my mind, but it doesn't **/
.selection li:not(.selected):last-of-type {
  border-bottom: none;
}

/** Non-important styles to put it into context **/
ul { list-style: none; padding: 0; width: 25%; margin: 2rem auto; }
li { padding: …

基本上我正在尝试通过Knockout和JSON对象填充Bootstrap模板.

Bootstrap脚手架:

<div class="row-fluid">
    <div class="span4">
        <h1>App Title</h1>
        <p>App Description</p>
    </div>
    <div class="span4">
        <h1>App Title</h1>
        <p>App Description</p>
    </div>
    <div class="span4">
        <h1>App Title</h1>
        <p>App Description</p>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <h1>App Title</h1>
        <p>App Description</p>
    </div>
    <div class="span4">
        <h1>App Title</h1>
        <p>App Description</p>
    </div>
    <div class="span4">
        <h1>App Title</h1>
        <p>App Description</p>
    </div>
</div>
...

这是我们正在使用的Knockout代码:

var viewModel;

$.get('AppData.json', function (data) {
    jsonData = $.parseJSON(data);
    viewModel = ko.mapping.fromJS(jsonData);
    var apps = viewModel.Apps();
    ko.applyBindings(viewModel);
});

问题是我无法让Knockout在</div><div class="row-fluid">索引模3的条件下运行淘汰后注入所需的...我假设因为这些<div>标签悬空/未关闭.

简而言之,我如何获得viewModel.Apps();适合上述Bootstrap脚手架的对象数组？

我有一组排列在网格中的div.

为每个div设置样式我用伪类选择它们.nth-child()

div.tile:nth-child(4n-7) .text { background-color: yellow; }

用户可以通过单击按钮来隐藏div(该按钮触发jQuery函数,该函数将display: none规则添加到class所选div中的属性).

jQuery的

$('.hide-divs').click(function () {
     $('.dolphin').toggleClass('hidden');
    })

CSS

.hidden { display: none; }

这是问题所在:

即使display: none从屏幕中删除div,它也不会从DOM中删除div,因此nth-child选择器在应用样式时仍会对其进行计数,这反过来又会混淆网格的视觉设计.

上面的布局被破坏了,因为只有第一列应该是黄色的.

所以我的第一个想法是使用jQuery remove()方法,它将元素(及其后代)从DOM中取出.

然而,事实证明,一旦remove()应用你就无法获得这些div.他们走了.因此切换功能会中断.

经过一些研究后,我发现了jQuery detach()方法,它做了同样的事情.remove(),除了它存储被删除的元素的数据供以后使用.

来自jQuery网站:

除了保留与删除的元素关联的所有jQuery数据之外, 该.detach()方法与之相同.当删除的元素稍后要重新插入DOM时,此方法很有用..remove().detach()

detach()除了我实现它的努力不起作用外,一切看起来都适合使用切换开关.

我在jQuery网站上使用了这个例子作为指南,但它不适用于网格.我也阅读了这个网站上的各种相关帖子,但无济于事.我肯定错过了什么.

任何反馈都将非常感激.

http://jsfiddle.net/tfyfpbb2/

$('.hide-divs').click(function() {
  $('.dolphin').toggleClass('hidden');
})

.row {
  display: flex;
  flex-wrap: wrap;
  width: 500px; …