使用css访问下一个元素（而不是子元素）

Question

我有以下html结构

<div class="col-sm-12">
    <input id="my_id">
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

我如何使用css target this second div

<div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">

为了改变其左边缘值。

我试过

#my_id + .col-sm-1 .col-3-box{
    margin-left:370px!important;
}

这不起作用。我在这里做错了什么？

Answer 1

如果你有标记：

<div>
    <div class="col-sm-12">
        <input id="my_id">
    </div>
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

比这个css：

.col-sm-12 + .col-sm-1.col-3-box{
    margin-left:370px!important;
}

如果这个标记：

<div class="col-sm-12">
    <input id="my_id">
    <div class="col-sm-1 col-3-box" style="position:absolute; margin-left:340px;">
    </div>
</div>

比这个css：

#my_id + .col-sm-1.col-3-box{
    margin-left:370px!important;
}

注意：.col-sm-1.col-3-box之间没有空格。