Question

我正在使用joomla，我有以下html

<div id="ja-footerwrap">
    <div class="moduletable">
        <div id="bottom-slider">
            <!--some contents-->
        </div>
    </div>
    <div class="moduletable">
        <div id="bottom-slider">
            <!--some contents-->
        </div>
    </div>
    <div class="moduletable">

            <!--some contents-->

    </div>
<!--and other divs with classes moduletable------>
</div>

我必须选择模块表，并且必须仅将display: inline-block;应用于包含id为 bottom-slider 的div。我怎么能这样做？

Answer 1

首先，您不能拥有多个具有相同ID的DOM对象，然后首先要更改标记并将id="bottom-slider"转换为class="bottom-slider"

然后，您可以使用jQuery更改包含moduletable 和 bottom-slider个孩子的父div：

$('.bottom-slider').parent('.moduletable').css({'display':'inline-block'});

这里的小提琴：http://jsfiddle.net/9tvcf/

希望这有帮助

Answer 2

如果您使用的是jQuery，可以直接使用

$('.bottom-slider').css({'display':'inline-block'});

PS：将id更改为class。

Answer 3

使用css4，您也可以使用纯CSS进行。

.module-table! > #bottom-slider {
display:inline-block;
}

Answer 4

我希望将来可以选择这个选择器

.bottom-slider - .moduletable{/*css here*/}

这种方法最好，因为儿童选择有+符号。

与~一样，我们希望放置^

选择包含特定id的前一个div

4 个答案: