progress::-webkit-progress-bar { border-radius: 10px; background-color: #ddd; }l两个：什么意思

在 CSS 中，双冒号 `::` 或者单冒号 `:` 都可以用来定义伪元素，用于创建一些不在 HTML 文档中而是在 CSS 中生成的虚拟元素。比如 `::before` 和 `::after` 伪元素就是用来在元素前后插入内容的。

在 `progress::-webkit-progress-bar` 和 `progress::-webkit-progress-value` 中，双冒号 `::` 被用来定义 WebKit 内核的私有伪元素。这是因为 `<progress>` 元素是 HTML5 中新增的元素，在标准化之前，不同浏览器可能会有不同的实现方式，因此需要使用私有前缀来指定特定的浏览器。在标准化之后，这些私有前缀可能会逐渐被废弃，因此不建议过度依赖它们。

相关问题

<div class="legend"> <span class="lbar">完成值</span> <span class="ltarget_bar">目标值</span> <span class="completion-rate">完成率</span> </div> .bar { height: auto; background-color: #2476d4; color: #fff; display: block; text-align: center; font-size: 14px; width: 80px; display: inline-block; } .target_bar { height: auto; background-color: #eb6207; color: #fff; display: block; text-align: center; font-size: 14px; width: 80px; }改写成进度条的形式

可以按照以下方式将代码改写成进度条的形式：

HTML代码：

<div class="progress">
  <div class="bar" style="width: 60%;"></div>
  <div class="target_bar" style="width: 80%;"></div>
</div>

CSS代码：

.progress {
  height: 20px;
  background-color: #ddd;
  border-radius: 10px;
  position: relative;
}

.bar {
  height: 100%;
  background-color: #2476d4;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

.target_bar {
  height: 100%;
  background-color: #eb6207;
  color: #fff;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

通过上述代码，可以实现一个带有完成值和目标值的进度条，其中完成值的宽度由样式属性 `width` 控制，目标值的宽度是固定的，两者叠加在一起，形成一个进度条的效果。