css - 如何在嵌套中选择包含指定类的div？

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 的直接 child

.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 并且具有较低的特异性(这使得在其他样式声明中更容易否决并且不会将您拖入“特异性 war ”)。如果您可以更改 html，建议这样做。