我在 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;
}
最佳答案
使用 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
}
}
}
关于css - 如何使用:nth-of-type selector with the :before selector in css3?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54311009/