SCSS: pseudo-class :first-of-type 影响所有类型

Question

关于 :first-of-type pseudo-class，我想寻求您的帮助。请检查我正在使用的简化代码示例 - :first-of-type 影响所有类型或什么都不影响。

HTML:

<div id='nav'>
  <div class='row'> 

    <div class='cell'>
      <strong>Subject 1</strong>
      <ul>
        <li>item 1</li>
      </ul>
    </div>

    <div class='cell'>
      <strong>Subject 2</strong>
      <ul>
        <li>item 1</li>
      </ul>
    </div>  

  </div>
</div>

SCSS:

#nav{
  @extend %filter_full_size;

  strong{
    color: $color_blue;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 3em;
    line-height: 3em;

    &:first-of-type{
      &:after{
        content: '';
        display: inline-block;
        position: absolute;
        width: 200%;
        height: 1px;
        background-color: $color_blue;
        bottom: 0;
        left: 0;
      }
    }
  }
}

我也尝试过使用 :first-of-type 作为带有 class 'cell' 的父元素，但它根本不起作用。

#nav{
  @extend %filter_full_size;
  
  .cell{
    strong{
      ......
    }

  &:first-of-type{ 
    strong{ 
      &:after{
        ......
      }
    }
  }
}

感谢您的帮助。 P.

Answer 1

您的第一次尝试选择了所有强元素，因为它们都是各自父元素的第一个子元素。

第一眼看不出您的第二次尝试有什么问题，您在第二次尝试中选择了作为第一个 .cell 元素的子元素的强元素。但是，我们还没有看到完整的代码，所以可能其中有什么问题？

I 'translated' SCSS to CSS 检查，这是我看到的结果：

如果这是你想要的，这里是片段：

#nav .cell strong{
    color: blue;
    width: 100%;
    display: inline-block;
    position: relative;
    height: 3em;
    line-height: 3em;
}

 #nav .cell:first-of-type strong::after{
        content: '';
        display: inline-block;
        position: absolute;
        width: 200%;
        height: 1px;
        background-color: blue;
        bottom: 0;
        left: 0;
      }

<div id='nav'>
  <div class='row'> 

    <div class='cell'>
      <strong>Subject 1</strong>
      <ul>
        <li>item 1</li>
      </ul>
    </div>

    <div class='cell'>
      <strong>Subject 2</strong>
      <ul>
        <li>item 1</li>
      </ul>
    </div>  

  </div>
</div>

SCSS: pseudo-class :first-of-type 影响所有类型

SCSS: pseudo-class :first-of-type affects all types

css

css-selectors

pseudo-class