Question

我正在尝试将样式添加到更大的div结构中的div，并且在结构中下面存在某个类。 html是

<div class="view-content">
    <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="ds-2col-stacked-fluid node node-lesson node-promoted node-teaser contextual-links-region view-mode-teaser teaser-layout clearfix" typeof="sioc:Item foaf:Document" about="/node/673">
            <div class="contextual-links-wrapper contextual-links-processed">
            <div class="group-header teaser-header">
            <div class="group-left teaser-left">
                <div class="field field-name-field-lessonintro field-type-text field-label-hidden">
                    <div class="field-items">
                        <div class="field-item even">
                            <p>Some text</p>

我创建的课程是teaser-left和teaser-right。我看到包含字段的外部div是

<div class="views-row views-row-1 views-row-odd views-row-first">

如果我这样做

.views-row > div {
    border: 1px solid #a1c0df;
}

它有效，但这适用于我不想要应用的东西。所以，我真的试图找出一个可以在上面完成的选择器，但只有当div在嵌套中包含teaser-left或teaser-right时才会完成。

谢谢！

Answer 1

如果teaser-left | right是views-row的直接子项

.views-row > .teaser-left,
.views-row > .teaser-right {
border: 1px solid #a1c0df;

}

如果嵌套得更深

.views-row .teaser-left,
.views-row .teaser-right {
    border: 1px solid #a1c0df;
}

如果适用，第一个解决方案是更高效的css（渲染更快），但在IE6中不支持（如果你仍然需要）

另一种选择是创建类.views-row-teaser-left，.views-row-teaser-right并解决这些问题，并在你的css中解决这些问题

.views-row-teaser-left, .views-row-teaser-right { border: 1px solid #a1c0df; }

这适用于每个浏览器并且是最有效的css并且具有较低的特异性（这使得在其他样式声明中更容易被否决，并且不会将你拖入＆＃34;特异性战争＆＃34;）。如果你改变html，可以推荐这个。

如何在嵌套中进一步选择包含指定类的div？

1 个答案: