Css 第 N 个子选择器未选择预期的元素

Question

我正在尝试 select 以下每个部分的第 7 和第 8 个元素将显示更改为 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>

显然在做...

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

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

但是当我尝试...

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

...也没有任何反应。我无法弄清楚我做错了什么。

编辑：使用 a 标签作为 class 是一个拼写错误。我的道歉

Answer 1

这对我有用，链接 7 和 8 是隐藏的：我删除了 a 选择器（它是一个元素，而不是 class）之前的 . 并设置了由于您的 <h1> 算作儿童，因此儿童编号为 8 和 9。

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>

Answer 2

请参考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/

Css 第 N 个子选择器未选择预期的元素

Css Nth-Child Selector Not Selecting Expected Elements

html

css

css-selectors

pseudo-class