Html 如何在使用CSS制作的链中集成多个锁图标？

我正在用css创建以下链。如您所见，我还在svg中创建了一个挂锁。我的目标是将这些锁中的多个直接添加到链中：

*{
-webkit框大小：边框框；
框大小：边框框；
}
*：之前，
*：之后{
-webkit框大小：边框框；
框大小：边框框；
}
html{
最小高度：100vh；
显示：网格；
}
身体{
最小高度：100vh；
显示：网格；
保证金：0；
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
-webkit-box-flex:1；
-ms-flex:1；
弹性：1；
背景：#ffffff；
}
.链子{
位置：绝对位置；
}
.链接{
显示：内联块；
宽度：2em；
高度：3雷姆；
边界半径：1em；
背景#ff8e50；
背景图像：-webkit渐变（线性、左上、左下、从（#f8be5b）、颜色停止（35%，#fef1c9）、颜色停止（65%，#e69539）到（#f7f2a0））；
背景图像：-webkit线性渐变（顶部，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
背景图像：-o-线性梯度（顶部，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
背景图像：线性渐变（至底部，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
}
.link:n子（2n+1）：之前{
位置：绝对位置；
内容：“；
顶部：0.5雷姆；
左：0.5雷姆；
宽度：1em；
高度：2em；
边界半径：继承；
背景：#ffffff；
}
.links.left.link{
-webkit变换：旋转（-25度）；
-ms变换：旋转（-25度）；
变换：旋转（-90度）；
}
.links.left.link:第n个子元素（2n），
.links.right.link:第n个子（2n）{
z指数：1；
宽度：0.5雷姆；
高度：2em；
位置：相对位置；
顶部：-7px；
背景#ff8e50；
背景图像：-webkit渐变（线性、左上、右上、从（#f8be5b）、颜色停止（35%，#fef1c9）、颜色停止（65%，#e69539）到（#f7f2a0））；
背景图像：-webkit线性渐变（左，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
背景图像：-o-线性梯度（左，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
背景图像：线性渐变（向右，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
}
/*锁*/
.镣铐{
行程：#000；
变换原点：右；
过渡：全部。3秒轻松；
转化：translateY（0%）；
}
svg{
宽度：100px；
透视图：1000px；
&.解锁{
.镣铐{
转化：translateY（-20%）；
}
}
}

---

这是一个不使用svg，只使用CSS的想法（我还简化了一些代码）

我使用了

radial/linear gradient

来创建锁

只需将锁插入需要显示的链接中即可

*，
*：之前，
*：之后{
框大小：边框框；
}
html{
最小高度：100vh；
显示：网格；
}
.链接{
显示：内联块；
位置：相对位置；
宽度：3rem；
高度：2em；
边界半径：1em；
背景：
线性梯度（向右，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
}
链接：以前{
位置：绝对位置；
内容：“；
顶部：钙（50%-0.5雷姆）；
左：计算值（50%-1rem）；
宽度：2em；
高度：1公厘；
边界半径：继承；
背景：#ffffff；
}
链接：之后{
位置：绝对位置；
z指数：2；
内容：“；
宽度：2em；
高度：0.5雷姆；
顶部：钙（50%-0.25雷姆）；
右：-1rem；
边界半径：1em；
背景图像：线性渐变（至底部，#f8be5b 0%，#fef1c9 35%，#e69539 65%，#f7f2a0 100%）；
}
.锁{
位置：绝对位置；
z指数：9；
宽度：2em；
高度：1.5雷姆；
背景：#000；
顶部：计算值（100%+0.25雷姆）；
左边距：0.75雷姆；
}
.洛克：以前{
内容：“；
位置：绝对位置；
高度：1.5雷姆；
宽度：1.5雷姆；
底部：97%；
边界半径：100%100%0；
左边距：0.25雷姆；
背景：
径向梯度（底部圆形，透明12%，#000 13%）0-37px/100%200%无重复，
线性渐变（向右，透明77%，#000 0），
线性梯度（向右，#000 23%，透明0）0px 19px/100%100%无重复；
}

---

更新：如评论中所述，使用CSS向量来绘制图像有一种快速将事情复杂化的趋势；这个问题就是一个很好的例子。如果对链链接和锁都使用SVG，这将变得非常简单。（“复杂”超出了简单的事实，即很少有绘图程序导出到CSS“图形”。这比日常使用的方法更具噱头。）

事实上，@Termani的答案是有效的

更完整的答案是将CSS链链接替换为SVG（例如），然后对链和锁使用

和

元素

原始答复：

在SVG中添加一个带有id属性的

标记，以标记您正在使用的图像。然后，在特定链接中，您可以添加带有

标记的

标记来引用图像。（未测试代码，但应能正常工作）

很有趣，我将尝试一下；）你可能正在使用SCS，我想，在纯CSS中嵌套CSS规则是不可能的。你到底想做什么，你还没有做？你有链子。某些链接上有锁。我不理解你要求的区别。我误解了这个问题。基于“上面的显示显示了添加到每个链元素的锁。有什么建议吗？”，我想他只是想将图像添加到所有链接中。请参阅我的新答案以了解使用的方法

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
    <symbol id="padlock" width="20px" height="20px" viewBox="0 0 512 512">
        <path d="M64,234.667h384V512H64V234.667z"/>
        <path class="shackle" fill="none" stroke="#000000" stroke-width="60" stroke-miterlimit="10" d="M362.666,436.5V128
    c0-58.901-47.766-106.667-106.666-106.667c-58.901,0-106.667,47.765-106.667,106.667v128"/>
    </symbol>
</svg>
<div class="container">
  <div class="swag">
    <div class="chain">
      <div class="links left">
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"><svg><use xlink:href="#padlock"></use></svg></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
        <div class="link"></div>
      </div>
    </div>
  </div>
</div>