Css Nth-Child 选择器未选择预期元素答案

【问题标题】：Css Nth-Child Selector Not Selecting Expected ElementsCss Nth-Child 选择器未选择预期元素
【发布时间】：2018-10-22 08:58:22
【问题描述】：

我正在尝试选择以下每个部分的第 7 个和第 8 个元素以将显示更改为无。

<div class="container-fluid">
    <div class="row">
        <h1>Title 1</h1>
        <a href="https://example.com/96" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 1</p>
            </div>
        </a>
        <a href="https://example.com/95" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 2</p>
            </div>
        </a>
        <a href="https://example.com/94" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 3</p>
            </div>
        </a>
        <a href="https://example.com/93" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 4</p>
            </div>
        </a>
        <a href="https://example.com/92" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 5</p>
            </div>
        </a>
        <a href="https://example.com/91" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 6</p>
            </div>
        </a>
        <a href="https://example.com/90" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 7</p>
            </div>
        </a>
        <a href="https://example.com/89" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 8</p>
            </div>
        </a>
    </div>
    <div class="row">   
        <h1>Title 2</h1>
        <a href="https://example.com/96" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 1</p>
            </div>
        </a>
        <a href="https://example.com/95" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 2</p>
            </div>
        </a>
        <a href="https://example.com/94" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 3</p>
            </div>
        </a>
        <a href="https://example.com/93" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 4</p>
            </div>
        </a>
        <a href="https://example.com/92" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 5</p>
            </div>
        </a>
        <a href="https://example.com/91" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 6</p>
            </div>
        </a>
        <a href="https://example.com/90" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 7</p>
            </div>
        </a>
        <a href="https://example.com/89" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 8</p>
            </div>
        </a>
    </div>
</div>

显然在做的时候……

.imageblock.col-sm-3:nth-child(7) { display: none; }

...没有任何反应，因为这些元素不是父元素的第 7 个子元素。

但是当我尝试...

a.recirc-rail_unit:nth-child(7) { display: none; }

...什么也没有发生。我无法弄清楚我做错了什么。

编辑：使用 a 标签作为类是一个错字。我的道歉

【问题讨论】：

你选择.a作为一个类，但它只是一个标签a
最好也考虑第 n 个类型
试试a.recirc-rail_unit:nth-child(7) .imageblock.col-sm-3{ display: none; }

标签： html css css-selectors pseudo-class

【解决方案1】：

请参考JSfiddle：https://jsfiddle.net/8crqu6s2/

.row > a:nth-of-type(7) {
    display: none;
}

.row > a:nth-of-type(8) {
    display: none;
}

参考：https://css-tricks.com/almanac/selectors/n/nth-of-type/

【讨论】：

【解决方案2】：

这对我有用，链接 7 和 8 是隐藏的：我删除了 a 选择器之前的 .（它是一个元素，而不是一个类），并将子编号设置为 8 和 9，因为你的 @987654323 @ 算作一个孩子。

a:nth-child(8) 选择 a，它是其父级的第 8 个子级，所以这里是 .row。

希望对你有帮助。

a.recirc-rail_unit:nth-child(8), a.recirc-rail_unit:nth-child(9) {
  display: none;
}

<div class="container-fluid">
    <div class="row">
        <h1>Title 1</h1>
        <a href="https://example.com/96" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 1</p>
            </div>
        </a>
        <a href="https://example.com/95" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 2</p>
            </div>
        </a>
        <a href="https://example.com/94" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 3</p>
            </div>
        </a>
        <a href="https://example.com/93" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 4</p>
            </div>
        </a>
        <a href="https://example.com/92" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 5</p>
            </div>
        </a>
        <a href="https://example.com/91" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 6</p>
            </div>
        </a>
        <a href="https://example.com/90" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 7</p>
            </div>
        </a>
        <a href="https://example.com/89" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 8</p>
            </div>
        </a>
    </div>
    <div class="row">   
        <h1>Title 2</h1>
        <a href="https://example.com/96" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 1</p>
            </div>
        </a>
        <a href="https://example.com/95" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 2</p>
            </div>
        </a>
        <a href="https://example.com/94" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 3</p>
            </div>
        </a>
        <a href="https://example.com/93" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 4</p>
            </div>
        </a>
        <a href="https://example.com/92" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 5</p>
            </div>
        </a>
        <a href="https://example.com/91" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 6</p>
            </div>
        </a>
        <a href="https://example.com/90" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 7</p>
            </div>
        </a>
        <a href="https://example.com/89" target="_blank" class="recirc-rail_unit">
            <div class="image-block col-sm-3">
                    <p>Link 8</p>
            </div>
        </a>
    </div>
</div>

【讨论】：