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