Задайте пользовательский атрибут в div

Question

У меня есть набор div с последовательностью чисел. Как я могу получить доступ к определенному номеру (например, si = 3)

Я пробовал несколько вариантов без радости. Любые другие варианты?

<div id="parentdiv" style="height:500px;> 
    <div class="child_div" si="1" title="F1" style="top:360px; left:68px;"></div> 
    <div class="child_div" si="2" title="F1" style="top:360px; left:80px;"></div> 
    </div> 

    ATTEMPTS 

    #parentdiv si[2] { 
     left:50%; 
    } 

    #parentdiv > [si~="2"] { 
     left:50%; 
    } 

    #parentdiv > div[si~="2"] { 
     left:50%; 
    } 

Answer 1

Во-первых. это #parentdiv [si="2"] делает работу , но Позиционные значения, такие как верхний и левый, должны иметь контекст позиционирования.

В этом случае элемент должен иметь либо position:absolute, либо position:relative (в зависимости от вашего требования), чтобы значения позиции работали.

Во-вторых, рядный стиль вступит в силу последний и так переопределить любые стили CSS связаны если дополнительная специфичность не применяется.

К сожалению, единственный способ переопределить встроенный стиль - !important.

#parentdiv * { 
 
    position: relative; 
 
} 
 
#parentdiv [si="1"] { 
 
    height: 50px; 
 
    background: orange; 
 
} 
 
#parentdiv [si="2"] { 
 
    height: 50px; 
 
    background: pink; 
 
    left: 50% !important; 
 
}

<div id="parentdiv" style="height:500px;"> 
 
    <div class="child_div" si="1" title="F1" style="top:60px; left:68px;">1</div> 
 
    <div class="child_div" si="2" title="F1" style="top:60px; left:80px;">2</div> 
 
</div>

Answer 2

Попробуйте это:

div[si="2"] { 
     left:50%; 
    } 

<div id="parentdiv" style="height:500px;"> 
    <div class="child_div" si="1" title="F1" style="">si_1</div> 
    <div class="child_div" si="2" title="F1" style="">si_2</div> 
    </div>