CSS - 複数の属性値を選択するにはどうすればよいですか？

Question

属性に異なる番号の値が含まれている複数のdivタグがあり、1から10までの数字だけを選択したい場合、CSSでこれを行う最も効率的な方法は何ですか？

.div[line-number=1-10]？

Answer 1

これは標準CSSでは不可能です。 SASSやLESSのようなCSSプリプロセッサを使うと、他の多くの機能の中でループを作成することができます。 SASSと例：あなたは、代わりにこのソリューションを使用するように運命づけされている純粋なCSSで

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

#{$selector} { 
    // style 
} 

：

.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

あなたは範囲（1-10）で行番号を指定することはできません。

これは属性セレクタ-https://www.w3.org/TR/css3-selectors/#attribute-selectorsでは使用できません。

しかし、その代わりに、あなたは、これはいくつかの方法（Y）に役立つことを願っています

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>

以下のようなもので、各属性値にCSSを適用することができます。

Answer 3

あなたは0から始まる行番号の属性を変更する機能（01,02,03,04 ... 10）を持っている場合は、これを行うことができますから、答えが表示されない場合

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

を@jackBauer