css - 如何使用:nth-of-type selector with the :before selector in css3?

Question

我在 Drupal 8 元素中工作。我有一个侧边栏，我在 DOM 中动态插入了一个无序列表。我一直在尝试通过 CSS3 伪类插入一些 SVG :before 并且它起作用了。但是，我需要为该列表中的不同 anchor 标记插入不同的 SVG。所以我想这样做:

ul {
 li {
  a {
    &:nth-of-type(1):before {
     //Code goes here
    }
    &:nth-of-type(2):before {
     //Code goes here
    }
    &:nth-of-type(3):before {
     //Code goes here
    }
  }
 }
}

有什么想法可以实现吗？提前致谢

HTML 标记:

<ul>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 1</a>
    </li>
    <li>
    <a href="" data-drupal-link-system-path="<front>">Menu Link 2</a>
                                        <ul>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 1</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 2</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Submenu-sidebar 3</a>
    </li>
    </ul>

    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 3</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 4</a>
    </li>
    <li>
        <a href="" data-drupal-link-system-path="<front>">Menu Link 5</a>
    </li>
</ul>

到目前为止我已经尝试过:

ul {
     border: none;
     -webkit-box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
     -moz-box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
      box-shadow: 1px 0px 9px 0 rgba(0,0,0,0.75);
      list-style: none;
      padding: 0;
      margin: 0;
      width: rem(280px);
      li {
          a {
            background-color: $white;
            color: $greyish-brown;
            display: block;
            padding: rem(20px) rem(35px);

            &:hover {
               background-color: $blue-green;
               color: $white;
            }
            }
            a:nth-of-type(1):before {
              @extend %svg-sidebar-decorations;
              background-image: url("../images/picto-info-sant.svg");
            }
             a:nth-of-type(2):before {
                @extend %svg-sidebar-decorations;
                background-image: url("../images/picto-infosocial.svg");

             }
             a:nth-of-type(2):before {
                @extend %svg-sidebar-decorations;
                background-image: url("../images/picto-infosocial.svg");
             }
            }

    %svg-sidebar-decorations {
    content: '';
    display: inline-block;
    width: rem(14px);
    height: rem(16px);
    margin-top: rem(3);
    margin-right: rem(10px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Answer 1

使用 nth-child(n) 而不是 nth-of-type(n) 并将这些选择器移动到 li 级别。

您的 SCSS (?) 可能看起来像这样:

ul {
  li {
    &:nth-child(1) a:before {
      //Code goes here
    }
    &:nth-child(2) a:before {
      //Code goes here
    }
    &:nth-child(3) a:before {
      //Code goes here
    }
  }
}

Example CodePen