CSS - Wie wählt man mehrere Attributwerte?

Question

Wenn ich mehrere div-Tags mit einem Attribut mit verschiedenen nummerierten Werten habe, und ich möchte nur die Nummern 1 bis 10 auswählen, was ist der effizienteste Weg, dies in CSS zu tun?

Gibt es etwas wie z.B. .div[line-number=1-10]?

Answer 1

Dies ist in der Standard-CSS nicht möglich. Es ist praktisch, einen CSS-Präprozessor wie SASS oder LESS zu verwenden, mit dem Sie Schleifen unter vielen anderen Funktionen erstellen können. Ein Beispiel mit SASS:

$selector: '.div'; 
@for $i from 1 to 10 { 
    $selector: $selector + '[line-number=' + $i + ']'; 
} 

#{$selector} { 
    // style 
} 

In reinen CSS Sie sind zum Scheitern verurteilt, anstatt diese Lösung zu verwenden:

.div[line-number=1], .div[line-number=2], .div[line-number=3], .div[line-number=4], .div[line-number=5], .div[line-number=6], .div[line-number=7], .div[line-number=8], .div[line-number=9], .div[line-number=10] { 
} 

Answer 2

Sie keine Zeilennummer in Bereich (1-10) angeben.

Dies ist im Attributselektor nicht verfügbar - https://www.w3.org/TR/css3-selectors/#attribute-selectors.

aber alternativ können Sie CSS auf jedem Attributwert mit so etwas wie gelten unter

div[line-number="1"] { 
 
    color: red; 
 
} 
 

 
div[line-number="10"] { 
 
    color: green; 
 
}

<p>Use attribute selectors</p> 
 

 
<div line-number="1">one</div> 
 
<div line-number="2">two</div> 
 
<div line-number="10">ten</div>

Hope this in irgendeiner Weise helfen (y).

Answer 3

, wenn Sie die Möglichkeit, die Zeilennummer Attribut beginnend mit 0 (01,02,03,04 ... 10) zu ändern, dies zu tun:

div[line-number^="0"], div[line-number="10"] { 
    // css properties 
} 

wenn die Antwort nicht sieht aus @jackBauer