为什么同一个CSS不用于两个圈子

Question

我有一个非常基本的问题，我相信它将帮助我完全理解CSS。以下是我的代码的CSS和HTML。

.vl {
  border-left: 6px solid yellow;
  height: 100px;
  margin-bottom: none;
}

.circle {
  border: 2px solid #666666;
  border-radius: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  width: 17px;
  height: 17px;
  z-index: 86;
  margin-left: -7px;
  -webkit-transition: background-color .5s ease-in-out;
  -moz-transition: background-color .5s ease-in-out;
  -o-transition: background-color .5s ease-in-out;
  -ms-transition: background-color .5s ease-in-out;
  transition: background-color .5s ease-in-out;
}

<div class="vl"></div>
<div class="circle" />
<div class="vl" style="margin-top: 18px; margin-left: 4.8px;"></div>

现在，结果显示如下：

之后，当我添加另一个圆div <div class="circle"/>时。结果看起来像这样：

我根据结果有两个查询：

1. 为什么我的第二个圆圈没有出现在第一个圆圈的左边？我正在使用相同的CSS。

2. 我们如何创建像圆或直线之类的元素，使它们在每次使用时都能自动与它们旁边的元素完美对齐。我已经看到了，但从未得到它。

3. 请参考下图：

，

一旦我添加更多相同类别的div，它就会松散其颜色，颜色会变得更浅。

Answer 1

发生这种情况是因为您使用了无效的HTML标签。 <div />不是有效的标签，而您应该使用<div></div>。

遵循MDN web docs link查找实际用例：

  

标记省略：无，开始标记和结束标记都是必需的。

更正此问题后，将声明的所有类以及调用它们的次数无关紧要，它们都将具有相同的样式，例如-在您的情况下，具有相同的边距，没有褪色，等等。

.vl {
  border-left: 6px solid yellow;
  height: 100px;
  margin-bottom: none;
}

.circle {
  border: 2px solid #666666;
  border-radius: 100%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  opacity: 0.6;
  -webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
  width: 17px;
  height: 17px;
  z-index: 86;
  margin-left: -7px;
}

<h2>Vertical Line</h2>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>
<div class="vl"></div>
<div class="circle"></div>