Wybierz elementy z losowo generowanych identyfikatorów CSS

Question

mam ten znaczników gdzie identyfikatory nie są znane z góry:

#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>

Muszę zmienić kolor tła wszystkich DIV. Jest to najbardziej szczegółowy selektor mogę myśleć, ale to nie działa:

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

można to zrobić bez ciężkiej kodowania identyfikatorów, korzystając !important i zmieniającym znaczników HTML?

Answer 1

Zamiast uciekania się do !important, warto rozważyć użycie pseudo-klasę :not() zwiększyć swoistość swoje selektor, tak:

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

dopasowuje te same elementy, jak oryginalnego selektora (assumi ng, że specificity-hack nie jest możliwym identyfikatorem dla elementu div produktu, co wydaje się prawdopodobnie tutaj), ale od selectors inside :not() are included in the specificity calculation, liczy się jako bardziej szczegółowy niż reguły, które próbujesz przesłonić.

(Główny reason not to use !important if you can avoid it jest to, że uzależnia — jedyny sposób, aby zastąpić regułę !important jest z inny!important reguła, więc im więcej korzystasz, tym więcej znajdziesz się potrzebne.Ostatecznie połowa reguł CSS zostanie oznaczona jako !important, a Ty wracasz z powrotem tam, gdzie zaczynałeś, z tym że teraz twoje arkusze stylów są przepełnione dużą ilością znaczników !important, a także skutecznie pozbawiłeś się możliwości używania !important do nadpisuj normalne style w rzadkich przypadkach, w których jest to naprawdę uzasadnione, a teraz ma na celu ucieczka się do hacków specyficznych, takich jak pokazana powyżej. Morał z tej historii: !important jest potężny, ale łatwy do nadużywania — nie używaj go, chyba że naprawdę musisz!)

Answer 2

Można zastąpić selektor identyfikatora Za pomocą tego kodu [id | = "produkt"] lub div.product: nie (#product) selektor:

#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>

Inną praktyką jest mieć klasy, a nie ids w twoim css, więc mogą być łatwo nadpisane.

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

Answer 3

Może wybrać div poprzez klasy (bo wszyscy mają takie same) i dodać !important

.product { 
    background: transparent!important; 
} 

Answer 4

użyć CSS! Ważną cechą jest to użyteczne w sytuacjach, jak jesteś obecnie. Ale bądźcie kużni podczas korzystania z niego nie używaj go nadmiernie w swoich plikach css. Jest używany w css do nadpisywania reguł. Ilekroć umieścisz go po jakiejkolwiek regule css, która będzie ważna, użyjemy tej reguły w stosunku do jakiejkolwiek innej reguły zdefiniowanej gdziekolwiek w plikach css, których używasz.

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

Answer 5

Myślę, że to jeden z tych przypadków, gdzie !important może być najlepszym rozwiązaniem.

#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>

Answer 6

Prosto z https://developer.mozilla.org/en/docs/Web/CSS/Specificity#The_!important_exception

Gdy! Ważna zasada jest stosowana na deklaracji stylu, deklaracja zastępuje żadnych innych deklaracji.

można wykorzystywać !important pominięcia każdego 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;} 

Answer 7

Selektor atrybut [id ....] musi być zmieniona, aby wykonać wartość prefix ([id^= "produkt"]), także dlatego, że ID będzie wymagać czegoś, co będzie potrzebne, ważne po zastosowaniu przezroczystego bgcolor. Zobacz poniżej próbkę 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> 

Answer 8

Wystarczy dodać do swojej body lub inny element, który owija swój products jakiś identyfikator i

#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>

Answer 9

można użyć tego

: nth-child (liczba) {deklaracje css;} Przykład:

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

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

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

Answer 10

wszystkich trzech id selektorów, które są stosowane we fragmencie mają swoistość 100 natomiast selektora, którego używasz, aby spróbować i zastąpić (div.product[id^="product-"]) ma specyfikę tylko 021 (bo ma jeden selektor klasy, jeden selektor atrybutu i jeden selektor typu elementu).

Nie można zastąpić przełącznik id chyba że używasz innego wyboru id jako część pełnego selektora (dodając selektor id nigdzie wystarczą) (lub) stosowanie !important (lub) stosowanie stylów inline. Ponieważ nie zostanie dodany selektor id, pierwsza cyfra będzie zawsze wynosić 0, a więc będzie mniej dokładna niż selektory id.

Ponieważ nie można zakodować na stałe wartości id każdego elementu (ponieważ jest losowa), jedyną opcją byłoby dodanie elementu id do elementu nadrzędnego, a następnie użycie go jako części selektora, tak jak wspomniałem w moim komentarzu. id może zostać dodany do wspólnego rodzica (lub), jeśli nie ma rodzica, a następnie do 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>

Answer 11

Selector div.product[id*="product-"] will działa! jeśli trzeba przerobić już istniejący obiekt, trzeba użyć !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