CSS - Как выбрать несколько значений атрибутов?

Question

Если у меня есть несколько тегов div с атрибутом, содержащим разные нумерованные значения, и я хотел бы выбрать только число от 1 до 10, что является самым эффективным способом сделать это в css?

Есть ли что-нибудь подобное, например. .div[line-number=1-10]?

Answer 1

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

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

#{$selector} { 
    // style 
} 

В чистом CSS вы обречены использовать это решение вместо:

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

Но в качестве альтернативы вы можете применить CSS каждого значение атрибута с чем-то, как показано ниже

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>

Надеется, что это поможет в некотором роде (у).

Answer 3

, если у вас есть возможность изменить атрибут линии номер, начиная с 0 (01,02,03,04 ... 10) Вы можете сделать это:

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

, если не видите ответа от @jackBauer