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>