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"]确实有用但位置值（如top和left）需要有一个定位上下文。

在这种情况下，元素需要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>

在div中定位自定义属性

2 个答案: