相关疑难解决方法(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().

有人可以解释原因吗？

我可以为每个第3个列表项设置样式吗？

目前在我的960px广泛div中,我有左侧浮动的框列表,并以3x3网格视图显示.它们也有一个右边距30px,但由于第3个第6个和第9个列表项具有此边距,因此它们会使它们向下跳跃,使得网格显示错误

如果没有给他们一个不同的课程,那么第3和第6个没有边际权利是多么容易,或者这是唯一的方法吗？

如何使用纯CSS为每个第三个元素设置样式.

我见过这样的问题,但它们涉及到javascript.我想要一个简单的CSS解决方案.我知道我可以使用even或odd使用:nth-child但:nth-child(third)不能正常工作:nth-child(3)

例:

<section>
  <div class="someclass"></div>             STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        DON'T STYLE
  <div id="someotherId"></div>              STYLE
  <div class="someclass"></div>             DON'T STYLE
  <div id="someId"></div>                   DON'T STYLE
  <div class="someotherclass"></div>        STYLE
</section>

这可能与CSS - 没有JavaScript或jQuery？

我有一个HTML列表,在CSS的帮助下,我正在排列3列的行.

因此,如果列表有6个元素,它将是2行x 3列,9个元素 - 3 x 3,12个元素 - 4 x 3等等.

如何使用CSS nth-child选择器选择每行的中间元素？即,第2,第5,第8 ......元素.

提前致谢!

我有很长的DIV系列,我需要使用nth-child选择器在每第4个DIV上更改填充,但是我在使用它时遇到了问题.

这是我的css:

.content_tab {
    width: 220px;
    height: 340px;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    background-color: #0F0;
}
.content_tab:nth-child(4){
    background-color: #F00;
    margin-right: 0px;
}

这是我的HTML:

<div class="content">
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
    <div class="content_tab"></div>
</div>

有任何想法吗？

我正在尝试选择第3个元素,然后每4个元素.

所以它会选择3,7,11,15,19,23 ...等.

.project:nth-child(3), .project:nth-child(7n+4) {
    margin: 40px 0px 0px 0px;
}

当前代码有什么问题？它不起作用,保证金在右边距仍然设置为40px.

我怎样才能选择第1,第4,第7个元素等等？还有如何选择3号,6号,9号等？

模式是选择和元素然后留下两个并选择第三个.我知道我应该使用:nth-child,但我不知道究竟是怎么回事.

我有一个使用CSS3列数的报纸格式的标题网格.

http://jsfiddle.net/L6TTJ/

HTML:

<ul>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <!-- ... etc ... -->
</ul>

CSS(为简洁起见,省略了供应商前缀和非相关规则):

ul {
    column-count: 3;
    column-rule: 1px solid #ccc;
}
li { border-bottom: solid 1px #ccc; }

您可以看到它的发展方向:CSS中是否有任何方法可以定位li每列中的最后一个元素,以便删除底部边框？

我发现了这个问题,但没有答案.

在<i>首次使用的图标和孩子<div>应该有一个大的图标.任何其他<i>孩子<div>(但不是第一个)应该有一个中等大小的图标:

<div class="row list-item">
       <div class="span1">
           <i class="icon-user"></i>
       </div>

       <div class="span3">
           <div>
               <a href="#">Main Link</a> <i class="icon-male"></i>
           </div>
           <i class="icon-mail"></i> <a href="#">Link 2</a>
           <i class="icon-mobile"></i> <a href="#">Link 3</a>
       </div>
</div>

相关CSS:

.list-item > div:first-child {
    text-align: center;
}

.list-item i[class^="icon-"], .list-item[class*=" icon-"] {
    text-shadow: 3px 1px 2px rgba(0, 0, 0, 0.2);
}

/* Only i with icon-* class, where div is first child */
.list-item > div:first-child > i[class^="icon-"],
    .list-item > div:first-child …

好的，我有一种情况，我有一组颜色列表，比方说10。

现在我想遍历子元素的颜色列表，并为它们指定 1-10 的颜色；但是我事先不知道我要生多少个孩子，所以我不确定如何处理。

就像，孩子 1 应该有颜色 1，但孩子 11 也应该有颜色 1（因为颜色列表重新开始），显然孩子 2 会得到颜色 2，孩子 12 会得到颜色 2，依此类推。 .

示例 HTML：

<ul>
    <li>Some Text</li> <!-- Color #1 -->
    <li>Some Text</li> 
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li> <!-- Color #10 -->

    <li>Some Text</li> <!-- Color #1 -->
    <li>Some Text</li>        
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li>
    <li>Some Text</li> <!-- Color #7 -->
</ul>

无论如何，是否:nth-child可以使用 Sass 函数或其他方法来执行此操作？