Question

我目前根据以下布局来构造HTML代码：

CSS

...
.dynamic-search
{
    top: 105px;
    position: absolute;
    right: 60px;
}
...

HTML

<body>
...
    <span>
         <input id="search" class="dynamic-search">
    </span>
    <span>...</span>
    <div>...</div>
        <div>
            <table class="mobile-table">
                ...
            </table>
            ...
        </div>
...
</body>

我需要根据表元素是否具有“ mobile-table”类来更改输入框类的位置（顶部）值的位置。

因此，通过在表元素中添加“ mobile-table”类，输入框与页面顶部的距离将变为160px；但是通过删除该类，距离将恢复为105px。

我想使用css选择器来做到这一点，所以可能类似于：

span + div > div + .mobile-table ~ span > input {
    top: 160px;
}

可以做到吗？预先感谢。

请注意，此解决方案只能使用CSS而不是javascript。

根据后代属性类名称

0 个答案: