与 CSS 选择器相关的查询答案

【问题标题】：Query related to CSS Selector与 CSS 选择器相关的查询
【发布时间】：2020-08-18 05:48:42
【问题描述】：

我正在编写以下显示进度的代码：

ol.progress[data-steps="2"] li {
  width: 49%;
}

ol.progress[data-steps="3"] li {
  width: 33%;
}

ol.progress[data-steps="4"] li {
  width: 24%;
}

ol.progress[data-steps="5"] li {
  width: 19%;
}

ol.progress[data-steps="6"] li {
  width: 16%;
}

ol.progress[data-steps="7"] li {
  width: 14%;
}

ol.progress[data-steps="8"] li {
  width: 12%;
}

ol.progress[data-steps="9"] li {
  width: 11%;
}

.progress {
  width: 100%;
  list-style: none;
  list-style-image: none;
  margin: 20px 0 20px 0;
  padding: 0;
}

.progress li {
  float: left;
  text-align: center;
  position: relative;
  font-family: sans-serif;
}

.progress .name,
.progress .description {
  display: block;
  vertical-align: bottom;
  text-align: center;
  color: black;
  opacity: 0.3;
}

.progress .name {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.progress .step {
  border: 3px solid #b6b6b6;
  background-color: #b6b6b6;
  border-radius: 50%;
  line-height: 1.2;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  z-index: 0;
}

.progress .step:before {
  content: "";
  display: block;
  background-color: #b6b6b6;
  border: 3px transparent;
  height: 0.2em;
  width: 100%;
  position: absolute;
  top: 0.6em;
  left: -50%;
  z-index: -2;
}

.progress .step:after {
  content: "";
  display: block;
  background-color: #1876d5;
  border: 3px transparent;
  height: 0.35em;
  width: 0;
  position: absolute;
  top: 0.55em;
  left: 50%;
  z-index: -1;
}

.progress li:first-of-type .step:before {
  display: none;
}

.progress li:last-of-type .step:after {
  display: none;
}

.progress .done .step {
  background-color: #1876d5;
  border: 3px solid #1876d5;
}

.progress .done .step:after {
  width: 100%;
  transition: width 2s ease;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <ol class="progress" id="test" data-steps="4">
    <li class="done">
      <span class="step"></span>
      <span class="name">Step 1</span>
      <span class="description">Foo</span>
    </li>
    <li class="done">
      <span class="step"></span>
      <span class="name">Step 2</span>
      <span class="description">Bar</span>
    </li>
    <li class="">
      <span class="step"></span>
      <span class="name">Step 3</span>
      <span class="description">Baz</span>
    </li>
    <li class="">
      <span class="step"></span>
      <span class="name">Step 4</span>
      <span class="description">Abc</span>
    </li>

  </ol>
</body>

</html>

我用上面的代码得到了这个output。使用 CSS，我尝试在第 2 步和第 3 步之间排除蓝色，使其保持灰色（类似于第 3 步和第 4 步之间的颜色）。我试过下面哪个不起作用：

    .progress .step:last-of-type .step:before {
    display: none;
}

是否有任何类似类型的 CSS 可用于实现此功能。谢谢。

【问题讨论】：

@Gad 感谢您的回答。但我一直在寻找动态工作的 CSS，而不管步数的变化或现有 li 的 css 类的变化。例如，如果我在上面的代码中将“done”类添加到第三个 li（即
），进度指示器输出将变为无效。一般来说，如果 n 步完成（其
），则在第 n 步之后不能有蓝色进度线。

【解决方案1】：

如果我理解您的回答，这将解决您的问题，只需使用 nth-child 选择器来排除第 2 步和第 3 步之间的蓝色。

以下是一个例子

ol.progress[data-steps="2"] li {
  width: 49%;
}

ol.progress[data-steps="3"] li {
  width: 33%;
}

ol.progress[data-steps="4"] li {
  width: 24%;
}

ol.progress[data-steps="5"] li {
  width: 19%;
}

ol.progress[data-steps="6"] li {
  width: 16%;
}

ol.progress[data-steps="7"] li {
  width: 14%;
}

ol.progress[data-steps="8"] li {
  width: 12%;
}

ol.progress[data-steps="9"] li {
  width: 11%;
}

.progress {
  width: 100%;
  list-style: none;
  list-style-image: none;
  margin: 20px 0 20px 0;
  padding: 0;
}

.progress li {
  float: left;
  text-align: center;
  position: relative;
  font-family: sans-serif;
}

.progress .name,
.progress .description {
  display: block;
  vertical-align: bottom;
  text-align: center;
  color: black;
  opacity: 0.3;
}

.progress .name {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.progress .step {
  border: 3px solid #b6b6b6;
  background-color: #b6b6b6;
  border-radius: 50%;
  line-height: 1.2;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  z-index: 0;
}

.progress .step:before {
  content: "";
  display: block;
  background-color: #b6b6b6;
  border: 3px transparent;
  height: 0.2em;
  width: 100%;
  position: absolute;
  top: 0.6em;
  left: -50%;
  z-index: -2;
}

.progress .step:after {
  content: "";
  display: block;
  background-color: #1876d5;
  border: 3px transparent;
  height: 0.35em;
  width: 0;
  position: absolute;
  top: 0.55em;
  left: 50%;
  z-index: -1;
}

.progress li:first-of-type .step:before {
  display: none;
}


/*=========== added =====================*/

.progress li:nth-child(2) .step:before {
  display: none;
}

.progress li:nth-child(2) .step:after {
  display: none;
}


/*=========== added =====================*/

.progress li:last-of-type .step:after {
  display: none;
}

.progress .done .step {
  background-color: #1876d5;
  border: 3px solid #1876d5;
}

.progress .done .step:after {
  width: 100%;
  transition: width 2s ease;
}

<ol class="progress" id="test" data-steps="4">
  <li class="done">
    <span class="step"></span>
    <span class="name">Step 1</span>
    <span class="description">Foo</span>
  </li>
  <li class="done">
    <span class="step"></span>
    <span class="name">Step 2</span>
    <span class="description">Bar</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 3</span>
    <span class="description">Baz</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 4</span>
    <span class="description">Abc</span>
  </li>

</ol>

如果您想要一些动态，您将使用.done 类名来控制步骤，而不会被nth-child 选择器卡住。

以下是li 元素都没有.done 类名的示例

ol.progress[data-steps="2"] li {
  width: 49%;
}

ol.progress[data-steps="3"] li {
  width: 33%;
}

ol.progress[data-steps="4"] li {
  width: 24%;
}

ol.progress[data-steps="5"] li {
  width: 19%;
}

ol.progress[data-steps="6"] li {
  width: 16%;
}

ol.progress[data-steps="7"] li {
  width: 14%;
}

ol.progress[data-steps="8"] li {
  width: 12%;
}

ol.progress[data-steps="9"] li {
  width: 11%;
}

.progress {
  width: 100%;
  list-style: none;
  list-style-image: none;
  margin: 20px 0 20px 0;
  padding: 0;
}

.progress li {
  float: left;
  text-align: center;
  position: relative;
  font-family: sans-serif;
}

.progress .name,
.progress .description {
  display: block;
  vertical-align: bottom;
  text-align: center;
  color: black;
  opacity: 0.3;
}

.progress .name {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.progress .step {
  border: 3px solid #b6b6b6;
  background-color: #b6b6b6;
  border-radius: 50%;
  line-height: 1.2;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  z-index: 0;
}

.progress .step:before {
  content: "";
  display: block;
  background-color: #b6b6b6;
  border: 3px transparent;
  height: 0.2em;
  width: 100%;
  position: absolute;
  top: 0.6em;
  left: -50%;
  z-index: -2;
}

.progress .done .step:after {
  content: "";
  display: block;
  background-color: #1876d5;
  border: 3px transparent;
  height: 0.35em;
  width: 0;
  position: absolute;
  top: 0.55em;
  left: 50%;
  z-index: -1;
}

.progress li:first-of-type .step:before,
.progress li:last-of-type .step:after {
  display: none;
}

.progress .done .step {
  background-color: #1876d5;
  border: 3px solid #1876d5;
}

.progress .done .step:after {
  width: 100%;
  transition: width 2s ease;
}

<ol class="progress" id="test" data-steps="4">
  <li class="">
    <span class="step"></span>
    <span class="name">Step 1</span>
    <span class="description">Foo</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 2</span>
    <span class="description">Bar</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 3</span>
    <span class="description">Baz</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 4</span>
    <span class="description">Abc</span>
  </li>
</ol>

以下是 first 和 third li 具有 .done 类名的示例

ol.progress[data-steps="2"] li {
  width: 49%;
}

ol.progress[data-steps="3"] li {
  width: 33%;
}

ol.progress[data-steps="4"] li {
  width: 24%;
}

ol.progress[data-steps="5"] li {
  width: 19%;
}

ol.progress[data-steps="6"] li {
  width: 16%;
}

ol.progress[data-steps="7"] li {
  width: 14%;
}

ol.progress[data-steps="8"] li {
  width: 12%;
}

ol.progress[data-steps="9"] li {
  width: 11%;
}

.progress {
  width: 100%;
  list-style: none;
  list-style-image: none;
  margin: 20px 0 20px 0;
  padding: 0;
}

.progress li {
  float: left;
  text-align: center;
  position: relative;
  font-family: sans-serif;
}

.progress .name,
.progress .description {
  display: block;
  vertical-align: bottom;
  text-align: center;
  color: black;
  opacity: 0.3;
}

.progress .name {
  font-size: 1.5em;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.progress .step {
  border: 3px solid #b6b6b6;
  background-color: #b6b6b6;
  border-radius: 50%;
  line-height: 1.2;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  z-index: 0;
}

.progress .step:before {
  content: "";
  display: block;
  background-color: #b6b6b6;
  border: 3px transparent;
  height: 0.2em;
  width: 100%;
  position: absolute;
  top: 0.6em;
  left: -50%;
  z-index: -2;
}

.progress .done .step:after {
  content: "";
  display: block;
  background-color: #1876d5;
  border: 3px transparent;
  height: 0.35em;
  width: 0;
  position: absolute;
  top: 0.55em;
  left: 50%;
  z-index: -1;
}

.progress li:first-of-type .step:before,
.progress li:last-of-type .step:after {
  display: none;
}

.progress .done .step {
  background-color: #1876d5;
  border: 3px solid #1876d5;
}

.progress .done .step:after {
  width: 100%;
  transition: width 2s ease;
}

<ol class="progress" id="test" data-steps="4">
  <li class="done">
    <span class="step"></span>
    <span class="name">Step 1</span>
    <span class="description">Foo</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 2</span>
    <span class="description">Bar</span>
  </li>
  <li class="done">
    <span class="step"></span>
    <span class="name">Step 3</span>
    <span class="description">Baz</span>
  </li>
  <li class="">
    <span class="step"></span>
    <span class="name">Step 4</span>
    <span class="description">Abc</span>
  </li>
</ol>

【讨论】：