множественный селектор классов с :: - moz-progress-bar css

Question

множественный селектор классов с :: - moz-progress-bar css

0

Мне нужно покрасить индикатор выполнения с разными цветами, исходя из их значения. У меня есть этот тестовый фрагмент

<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*/*

Я не могу сопоставить классы mulple с селектором ::-moz-progress-bar:

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

Только pbar-30 окрашен в красный цвет. Что я здесь делаю неправильно?

Можно ли написать несколько селекторов, подобных этому, или мне нужно написать их по одному?

LMG 05 май 2014, в 15:45

Источник

Теги:

html

css

css-selectors

1 ответ

Ещё вопросы

BoltClock · Accepted Answer · 2014-05-05T10-07-00.000Z

Вам нужно будет повторить псевдоэлемент через каждый из ваших селекторов классов.

Обратите внимание, что в этом случае вы можете сгруппировать все три селектора в одно правило, так как это тот же псевдоэлемент, специфичный для поставщика:

.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).

да, я понял, я думал о чем-то более простом, например, о списке селекторов: - о чем-то, где оно будет применяться ко всем элементам списка. Жаль! спасибо за предложение чувак