Question

我只需要为整个页面的第一个孩子应用样式，例如，如果我有一个类“ .my-icon”出现在多个其他div中，那么我希望它们不受影响，因此第一个孩子“有史以来”将受到影响，但不会使用id或jquery。

    <div>
      <div>
        <i class="my-icon">*</i> // only this element will be affected.
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
    </div>

Answer 1

.my-icon:nth-of-type(1)
{
    border:5px solid red;
}

<div>
  <div>
    <i class="my-icon">*</i> // only this element will be affected.
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
</div>

div:nth-of-type(1) >.my-icon:first-child {
  border:5px solid red;
}

<div>
  <div>
    <i class="my-icon">*</i> // only this element will be affected.
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
</div>

Answer 2

<style>
div:nth-of-type(1) >.my-icon:first-child {
  color: lime;
  background-color: black; 
  padding: 5px;
}
</style>
<div>
  <div>
    <i class="my-icon">*</i> // only this element will be affected.
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
  <div>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
    <i class="my-icon">*</i>
  </div>
</div>

Answer 3

最好添加一个选择器，否则请尝试以下代码段：

div:first-of-type > div:first-of-type > .my-icon:first-of-type {
  color: red;
}

<div>
      <div>
        <i class="my-icon">*</i> // only this element will be affected.
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
    </div>

Answer 4

很简单，为您的div和图标使用:first-child

div>div:first-child .my-icon:first-child{
  color:red;
}

<div>
      <div>
        <i class="my-icon">*</i> // only this element will be affected.
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
      <div>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
        <i class="my-icon">*</i>
      </div>
    </div>

Answer 5

div:first-child > .my-icon:first-child {
  /*your code here*/
}

很简单，您可以找到第一个div，然后在其中找到第一个类.my-icon。

如何在整个页面上仅将样式应用于元素一次？

5 个答案: