Css 以div中的自定义属性为目标

我有一组带数字序列的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%;
    }

试试这个：

 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>

div[si=“2”]{
左：50%；
}
si_1
si_2
首先。此
#parentdiv[si=“2”]
确实有效，但像top和left这样的位置值需要有一个定位上下文

在这种情况下，元素需要具有
position:absolute
或
position:relative
（取决于您的要求）才能使位置值起作用

其次，内联样式将在最后生效，因此覆盖任何链接的CSS样式，除非应用额外的特殊性

不幸的是，重写内联样式的唯一方法是使用
！重要信息


#parentdiv*{
位置：相对位置；
}
#parentdiv[si=“1”]{
高度：50px；
背景：橙色；
}
#parentdiv[si=“2”]{
高度：50px；
背景：粉红色；
左：50%！重要；
}

1.
2.
您是否尝试过
#parentdiv>[si=“2”]
？