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

有人可以解释原因吗？

有没有办法只用这个CSS影响可见元素？

table.grid tr.alt:nth-child(odd)
{
    background:#ebeff4;
}

table.grid tr.alt:nth-child(even)
{
    background:#ffffff;
}

如果我使用$('select some tr:s').hide()隐藏了一些行,我会得到奇怪和均匀样式的混合,但所有这些都在混合中.

在下面的代码中,我将如何div.b使用CSS 定位第二个？

<div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="a"></div>
</div>

我有几个随机块.每当一个块落入新行时,我都会让它看起来不同.当用户点击按钮时,我隐藏了几个块display:none,然后出现问题.该nth-child选择也算隐藏要素.

有没有办法忽略那些特定的块,所以每一行都有不同的风格？这是我类似场景的一个例子.

$('.hide-others').click(function () {
    $('.css--all-photo').toggleClass('hidden');
})

.board-item--inner {
    height:200px;
    background:tomato;
    text-align:center;
    color:#fff;
    font-size:33px;
    margin-bottom:15px;
    border:2px solid tomato;
}
@media (min-width:768px) and (max-width:991px) {
    .board-item:nth-child(2n+1) .board-item--inner {
        border:2px solid #000;
        background:yellow;
        color:#000;
    }
}
@media (min-width:992px) and (max-width:1199px) {
  .board-item:nth-child(3n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  }
}
@media (min-width:1200px) {
  .board-item:nth-child(4n+1) .board-item--inner {
    border:2px solid #000;
    background:yellow;
    color:#000;
  } 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="form-group">
        <button class="btn btn-info hide-others" type="button">Hide …

以下语句为我提供了第一个具有泰坦尼克类的元素

element = document.querySelector('.titanic');

我如何检索具有相同类的第二个元素？

假设我有这样的结构(并且不能修改它):

<ul>
    <li class="common">   <p>First A</p>   </li>
    <li class="common">   <p>Second A</p>   </li>
    <li class="common">   <p>Third A</p> </li>
    <li class="common">   <p><b>SELECT ME</b></p>   </li>
    <li>   <p>First B</p>   </li>
    <li>   <p>Second B</p>   </li>
    <li>   <p>...</p>   </li>
</ul>

有没有办法选择类"common"的最后一个元素？(在这种情况下是第四个元素)

首先,我尝试选择一个子集:

.common{
    background: red;
}

它工作正常.所以我尝试选择他们的最后一个孩子,用:

.common:last-child{
    background: green;
}

但不是运气.我也想避免为该元素添加一个类.

的jsfiddle

编辑:我简化了类和选择器,使其更清洁

我有一个表,我想要为每个替换行着色,除了具有类" openingTimes" 的行.

这个开放时间行不应该是阴影,但是这一行之后的模式应该继续,就像这样(用粗体表示着色!):

[ 信息1 ] [信息2] [开放时间行] [ 信息3 ] [信息4] [ 信息5 ] [信息6]

我拥有的CSS是:

table tr:not(.openingTimes):nth-child(even)
{
    background-color: #eeeeee;
}

但结果是:

[ 信息1 ] [信息2] [开放时间行] [信息3] [ 信息4 ] [信息5] [ 信息6 ]

我希望Info 3被遮蔽,并且模式将从那里继续.

我究竟做错了什么？谢谢!

编辑:好的,这是一个小提琴:http://jsfiddle.net/QWjnm/

用什么计算的规则:nth-child()？这只是一个错误吗？

.info_row:nth-child(even) {
  background: orange
}

<div>
  <h2>Title</h2>
  <div class="info_row">
    <div>Category:</div>
    <div>data</div>
  </div>
</div>

如果我用div.info_rowother换行<div>或删除<h2>它很明显，那.info_row:nth-child(even)是在<h2>没有.info_row类的情况下计算的。