Question

我试图隐藏第一个span元素中的.lineB元素：

<div id="main">
    <div class="lineA">I'm LineA</div>
    <div class="lineA">I'm LineA</div>
    <div class="lineB">I'm the first LineB <span>DONT SHOW ME</span></div>
    <div class="lineB">I'm LineB</div>
    <div class="lineB">I'm LineB</div>
    <div class="lineA">I'm LineA</div>
</div>

我试过了：

#main .lineB:first-of-type span {display: none}

但这不起作用。有什么想法吗？

Answer 1

也许申请所有人，否定所有人，但首先是否适合你的情况

.lineB{color:red}
.lineB ~ .lineB{color:inherit}

<div id="main">
    <div class="lineA">I'm LineA</div>
    <div class="lineA">I'm LineA</div>
    <div class="lineB">I'm the first LineB</div>
    <div class="lineB">I'm LineB</div>
    <div class="lineB">I'm LineB</div>
    <div class="lineA">I'm LineA</div>
</div>

在您的具体示例中，您可以使用#main .lineB span{display:none}，因为您只在第一个内部使用了跨度。

:first-of-type适用于元素类型（标记），因此它只匹配第一个类型的元素（ tag ）父母。由于您的所有元素均为div，因此:first-of-type与第一个div匹配。

扩展我的初始答案以处理这种情况你可以做

#main .lineB span{display:none}
#main .lineB ~ .lineB span{display:initial}

<div id="main">
    <div class="lineA">I'm LineA</div>
    <div class="lineA">I'm LineA</div>
    <div class="lineB">I'm the first <span>hide me</span> LineB</div>
    <div class="lineB">I'm LineB <span> show me</span></div>
    <div class="lineB">I'm LineB</div>
    <div class="lineA">I'm LineA</div>
</div>

Answer 2

简而言之：不。没有: first-of-class选择器。你能做的是：

使用.lineA + .lineB选择每个元素＆＃34; lineB＆＃34;它跟在一个带有＆＃34; lineA＆＃34;。

或

使用.lineB:first-of-type选择器，并为两个不同的类使用不同的元素类型（例如p和div）。

或

当然，请使用JavaScript。

选择具有特定类的第一个子项并在其中隐藏元素

2 个答案: