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

Question

我正在尝试选择以下每个部分的第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标签作为一个类是一个错字。我的appologies

Answer 1

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

a:nth-child(8)选择其父亲的第8个孩子的a，所以.row就在这里。

希望它有所帮助。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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