Question

我需要根据它们的值为不同颜色的进度条着色。我有这个测试片段

<div>
    pbar tests            
    <br>
    <progress class="pbar-0" max="100" value="0"></progress>
    <br>
    <progress class="pbar-10" max="100" value="10"></progress>            
    <br>
    <progress class="pbar-30" max="100" value="30"></progress>
    <br>
    <progress class="pbar-60" max="100" value="60"></progress>
    <br>
    <progress class="pbar-90" max="100" value="90"></progress>
    <br>
    <progress class="pbar-100" max="100" value="100"></progress>
</div>

以及以下css

*/*begin progress bar*/
progress,          /* All HTML5 progress enabled browsers */
progress[role]     /* polyfill */
{

    /* Turns off styling - not usually needed, but good to know. */
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;

    /* gets rid of default border in Firefox and Opera. */ 
    border: none;

    /* Needs to be in here for Safari polyfill so background images work as expected. */
    background-size: auto;

    /* Dimensions */
    width: 150px;
    height: 15px;
    border-radius: 3px;

}
/* Polyfill */
progress[role]:after {
    background-image: none; /* removes default background from polyfill */
}
/* Ensure fallback text doesn't appear in polyfill */
progress[role] strong {
    display: none;
}
progress,                          /* Firefox  */ 
progress[role][aria-valuenow] {    /* Polyfill */
    background: #f2f1f1 !important; /* !important is needed by the polyfill */
}
/* Chrome */
progress::-webkit-progress-bar {
    background: #f2f1f1;
}
/* IE10 */
progress {
    color: black;
}
/* Firefox */
progress::-moz-progress-bar { 
    background: black;  
}
/* Chrome */
progress::-webkit-progress-value {
    background: black;
}
/* Polyfill */
progress[aria-valuenow]:before  {
    background: black;
}
.pbar-0,.pbar-10,.pbar-30::-moz-progress-bar {
    background: red;
}

.pbar-60::-moz-progress-bar {
    background: yellow;
}


/*end progress bar*/*

我无法将多个类与::-moz-progress-bar选择器匹配：

.pbar-0,.pbar-10,.pbar-30::-moz-progress-bar {
    background: red;
}

只有pbar-30用红色着色。我在这里做错了什么？

是否可以像这样写一个多选择器，或者我需要逐个编写它们？

Answer 1

您需要在每个类选择器中重复伪元素。

请注意，在这种情况下，您仍然可以将所有三个选择器分组到一个规则中，因为它是完全相同的特定于供应商的伪元素：

.pbar-0::-moz-progress-bar, .pbar-10::-moz-progress-bar, .pbar-30::-moz-progress-bar {
    background: red;
}

当每个选择器具有不同的供应商前缀时，您只需要将选择器组拆分为单独的规则，就像您已经完成了其他几个规则（例如progress::-moz-progress-bar和progress::-webkit-progress-value）。

带有:: - moz-progress-bar css的多类选择器

1 个答案: