css - 如何对整个页面的元素只应用一次样式？

Question

我只需要为整个页面的第一个子项应用样式，例如，如果我有一个出现在多个其他 div 中的类 '.my-icon' - 那么我希望它们不会受到影响，所以只有第一个 -孩子“曾经”会受到影响，但不使用 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>

标签： css

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>