Выберите элементы со случайно сгенерированными идентификаторами с помощью CSS

у меня есть эта разметка, где ID не известен заранее:

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }
<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div class="product" id="product-54722210">Product 3</div>

мне нужно изменить цвет фона всех дивов. Это самый конкретный селектор, который я мог придумать, но он не работает:

div.product[id^="product-"] { background-color: transparent; }

можно ли это сделать без идентификаторов жесткого кодирования, используя !important и изменение разметки HTML?

6
css css-selectors css3 html

11 ответов

вместо того, чтобы прибегать к !important, вы можете рассмотреть возможность использования :not() псевдо-класс для увеличения специфичности вашего селектора, например:

div.product:not(#specificity-hack) { background-color: transparent; }

это соответствует тем же элементам, что и ваш исходный селектор (при условии, что specificity-hack не является возможным идентификатором для продукта div, что кажется вероятным здесь), но так как селекторы внутри :not() включены в расчет специфичности, это считается более конкретным, чем правила, которые вы пытаетесь переопределение.

(главная причина не использовать !important Если вы можете избежать его это привыкание-единственный способ переопределить !important правило с другое !important правило, поэтому чем больше вы его используете, тем больше он вам понадобится. В конце концов, половина ваших правил CSS будет отмечена !important, и вы в основном вернулись к тому, с чего начали, за исключением того, что теперь ваши таблицы стилей раздуты множеством !important маркеры и вы также эффективно лишил себя возможности пользоваться !important переопределить обычные стили в редких случаях, когда это действительно законно полезно, и теперь есть прибегнуть к специфичности хаков, как показано выше. Мораль рассказа:!important является мощным, но легко злоупотреблять-не используйте его, если вы действительно не должны!)

6

Я думаю, что это один из тех случаев, когда !important может быть лучшим вариантом.

#product-20625055 {
  background-color: #FC0;
}
#product-66980342 {
  background-color: #0CF;
}
#product-54722210 {
  background-color: #F0C;
}
div[id^="product-"].product {
  background-color: transparent !important;
}
<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div class="product" id="product-54722210">Product 3</div>
3

все три id селекторы, которые используются в вашем фрагменте, имеют спецификацию 100, тогда как селектор, который вы используете для попытки переопределения (div.product[id^="product-"]) имеет спецификацию только 021 (потому что он имеет один селектор классов, один селектор атрибутов и один селектор типов элементов).

вы не можете переопределить id селектор, если вы не используете другой id селектор как часть полного селектора (добавление id селектор в любом месте будет достаточно) (или) использования !important (или) используйте встроенные стили. Потому что если id селектор добавлен, первая цифра всегда будет 0 и поэтому будет менее специфичной, чем id селекторы.

так как вы не можете hardcode id каждого элемента (поскольку он случайный), единственным вариантом было бы добавить id родительскому элементу, а затем использовать его как часть селектора, как я упоминал в своем комментарии. The id может быть добавлен к общему родителю (или), если нет родителя, то к body.

#product-20625055 {
  background-color: #FC0;
}
#product-66980342 {
  background-color: #0CF;
}
#product-54722210 {
  background-color: #F0C;
}
#id div.product[id^="product-"] {
  background-color: transparent;
}
<div id='id'>
  <div class="product" id="product-20625055">Product 1</div>
  <div class="product" id="product-66980342">Product 2</div>
  <div class="product" id="product-54722210">Product 3</div>
</div>
3

возможно, вы могли бы выбрать div по классу (потому что все они имеют то же самое) и добавить !important

.product {
   background: transparent!important;
}
0

прямо от https://developer.mozilla.org/en/docs/Web/CSS/Specificity#The_!important_exception

когда !важное правило используется для объявления стиля, это объявление переопределяет любые другие объявления.

можно использовать !important для переопределения любого css

<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div class="product" id="product-54722210">Product 3</div>

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }

.product {background-color: transparent !important;}
0

селектор атрибута [id....] необходимо изменить, чтобы сделать соответствие значения префикса ([ id^= "продукт"]), также так как ID будет принимать предпочтение вам нужно !важно после применения прозрачного bgcolor. См. ниже для примера html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        <!--
        #product-20625055 { background-color: #FC0; }
        #product-66980342 { background-color: #0CF; }
        #product-54722210 { background-color: #F0C; }

        div.product[id^="product"] {
            background-color: transparent!important;
        }
        -->
    </style>
</head>
<body>

<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div class="product" id="product-54722210">Product 3</div>



</body>
</html>
0

используйте css !важная особенность это полезно в ситуациях, как вы в настоящее время. Но causious при ее использовании не используйте его excesively в CSS-файлы. Он используется в css для переопределения правил. Всякий раз, когда вы ставите его после любого правила css, что !важно будет убедиться, что использовать это правило над любым другим правилом, определенным в любом месте в любых CSS-файлов, которые вы используете.

#product-20625055 { background-color: #FC0 !important ; }
#product-66980342 { background-color: #0CF !important ; }
#product-54722210 { background-color: #F0C !important ; }
0

просто добавьте в свой body или другой элемент, который обертывает ваш products некоторые ID и 

#product-20625055 {
  background-color: blue;
}
#wrapper .product[id^="product-"] {
  background-color: red;
}
<div id="wrapper">
  <div class="product" id="product-20625055">Product 1</div>
</div>
0

селектор div.product[id*="product-"] работает! если вам нужно переписать уже существующее свойство, вы должны использовать !important:

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }

div.product[id*="product-"] {
  background-color: green!important;
}

jsfiddle-link

0

вы можете использовать этот

: nth-child (number) {объявления css;} Пример:

div.product:nth-child(1){ 
background-color:white; 
}

div.product:nth-child(2){ 
background-color:blue; 
}

div.product:nth-child(3){ 
background-color:yellow; 
}
-1

вы можете переопределить селектор ID, используя этот код [id / ="product"] или div.продукт: не (#продукт) селектор:

#product-20625055 { background-color: #FC0; }
#product-66980342 { background-color: #0CF; }
#product-54722210 { background-color: #F0C; }

/* You Can Use This Selector */
[id|="product"] {
  background-color: transparent !important;
}

/* Or This Selector */
div.product:not(#product) { background-color: transparent; }
<div class="product" id="product-20625055">Product 1</div>
<div class="product" id="product-66980342">Product 2</div>
<div id="product-54722210" class="product">Product 3</div>

другая практика состоит в том, чтобы иметь классы, а не идентификаторы в вашем css, поэтому их можно легко переопределить.

    .product-20625055 { background-color: #FC0; }
    .product-66980342 { background-color: #0CF; }
    .product-54722210 { background-color: #F0C; }
    
    
    .product { background-color:transparent; }
    
<div class="product product-20625055" id="product-20625055">Product 1</div>
    <div class="product product-66980342" id="product-66980342">Product 2</div>
    <div id="product-54722210" class="product product-54722210">Product 3</div>
-3