Question

我的标记看起来像吼叫：

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

我尝试使用first-of-type选择器隐藏第一个h4标记或每个组合选择器.title.blue和.title.green。

我认为这不起作用，因为元素不是兄弟姐妹。有没有办法继续使用first-of-type？

There's a pen as an example here

＆＃13;

h4.title.blue:first-of-type {
  display: none;
}

＆＃13;

<div>
  <div class="container">
    <div class="title-container">
      <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
  </div>
  <div class="container">
    <div class="title-container">
      <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
  </div>
  <div class="container">
    <div class="title-container">
      <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
  </div>
  <div class="container">
    <div class="title-container">
      <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
  </div>
</div>

＆＃13;

Answer 1

要隐藏第一个蓝色和第一个绿色，您应该同时修改html和CSS。看一下下面的例子：

＆＃13;

h4.title:first-child {
  display: none;
}

＆＃13;

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

＆＃13;

在第一个示例中，您可以看到first-child选择器中的每个<h4>标记都消失了。发生这种情况是因为它们不在同一水平上。请参阅下面的书面示例：

- container
 - title container
  - h4
 - </title container
- </container
- container
 - title container
  - h4
 - </title container
- </container>
- container
 - title container
  - h4
 - </title container
- </container>
- container
 - title container
  - h4
 - </title container
- </container>

正如您所看到的，每个<h4>标记位于新容器中。所以，如果我使用CSS，如下所示：

.container .title-container h4.title:first-child {
  display: none;
}

它不会显示每个容器的第一个<h4>标记。由于每个容器只有一个容器，所以它们都会消失。

作为解决方案，请尝试以下方法：

＆＃13;

.container .title-container h4.title:first-child {
  display: none;
}

＆＃13;

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue 1</h4>
        <p>Something blue no 1</p>
        <h4 class="title blue">blue 2</h4>
        <p>Something blue no 2</p>
    </div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green 1</h4>
        <p>Something green no 1</p>
        <h4 class="title green">green 2</h4>
        <p>Something green no 2</p>
</div>
</div>

＆＃13;

希望这有帮助！

Answer 2

h4.title:first-of-type {
  display: none;
}

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

你应该更新css

h4.title:first-of-type {
  display: none;
}

Answer 3

我尝试使用第一个类型的选择器来隐藏第一个h4标记或者每个组合选择器.title.blue和.title.green。

你几乎就在那里。

您需要在DOM上方的元素上使用:nth-of-type。

工作示例：

＆＃13;

div > div:nth-of-type(odd) > div h4 {
display: none;
}

＆＃13;

<div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title blue">blue</h4>
    </div>
    <p>Something blue no 2</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 1</p>
</div>
<div class="container">
    <div class="title-container">
        <h4 class="title green">green</h4>
    </div>
    <p>Something green no 2</p>
</div>
</div>

＆＃13;

Answer 4

我最终找到了另一种方法。我无法更改任何标记，但我可以移动CSS类。

我使用.container > .class-to-hide ~ .class-to-hide作为我的选择器。这选择了除.class-to-hide的第一个元素之外的所有元素。

Here's a pen showing that

对于不是兄弟姐妹的元素，CSS`首先是类型`

4 个答案: