Question

（在我开始之前，是的，我之前已经问过similar question;不幸的是，由于添加了新信息，标记已经完全改变了，现在我无法弄明白。）

我有一个由Drupal视图生成的非常难看的标记。因为许多类名可以在多个地方使用，在层次结构的不同级别中（例如，第一个view-content/view-grouping/view-grouping-header需要向左浮动（或者至少它的内容是为爆头图像做的，但是其他view-grouping-header元素需要显示在图像的右侧），我不能只解决类名;我需要获得完整的层次结构。我遇到了一些麻烦......（我知道有人会说，“但你可以在Drupal视图中为字段添加类;为什么不这样做？”好吧，如果你要显示单个字段，你可以这样做，但在这种情况下我需要按5分组显示的6个字段，当您按字段分组时，您将字段本身设置为从显示中排除，这意味着您添加到字段中的任何自定义类都将被忽略。您可以使用分组进行样式化的唯一操作是所有行的单个类，我已经完成但在这种情况下无效。）

<div class="view-clone-of-speaker-list">
<div class="view-content">
<div class="view-grouping">
    <div class="view-grouping-header">
        <div id="file-741" class="file file-image file-image-jpeg 
         contextual-links-region">
            <div class="content">
                <img src="johndoe.jpg" width="180" height="180" alt="" /> 
                <!-- this img needs to float left -->
            </div>
        </div>
    </div>

    <div class="view-grouping-content">
        <div class="view-grouping">
            <div class="view-grouping-header">
                <a href="/speaker/john-doe">John Doe</a>
                <!-- this view-grouping-header a needs to be styled differently 
                than the one the next level down (view full profile) -->
            </div>

            <div class="view-grouping-content">
                <div class="view-grouping">
                    <div class="view-grouping-header">
                        Freelance consultant
                    </div>
                    <div class="view-grouping-content">
                        <div class="view-grouping">
                            <div class="view-grouping-header">
                                Path to Purchase Institute
                            </div>
                            <div class="view-grouping-content">
                                <div class="view-grouping">
                                    <div class="view-grouping-header">
                                        <a href="/speaker/john-doe">
                                    view full profile    &gt;</a>
                                    </div>
                                    <div class="view-grouping-content">
                                        <h3>Sessions:</h3>
                                        <div class="views-row views-row-1 views-row-odd views-row-first">      
                                            <div class="views-field views-field-title-1">
                                                <span class="field-content">
                                                    <a href="/session/keynote-address-2">Keynote Address 2</a>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="views-row views-row-2 views-row-even views-row-last">      
                                            <div class="views-field views-field-title-1">
                                                <span class="field-content">
                                                    <a href="/session/keynote-address-1">Keynote Address 1</a>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

这是我尝试过的，例如，获取外部视图分组 - 我想在整个事物周围放置一个边框：

.view-clone-of-speaker-list.div.view-content.div.view-grouping {
    border: 1px solid #a8a8a8;      
}

但根据Firebug的说法，元素并没有那种风格。

这是理想的结果;我不需要帮助（我不认为！）与实际的样式代码;我只需要一只手弄清楚如何解决正确的元素，因为frakkin非常好地嵌套了。 enter image description here

Answer 1

选择器上的句号意味着“类”; div.myClass表示带有myClass类的div。 div.myClass.div.myOtherClass并不意味着什么。

我认为你想要的是

div.view-clone-of-speaker-list>div.view-content>div.view-grouping {
    border: 1px solid #a8a8a8;      
}

这意味着“具有一类视图分组的div，它是具有一类视图内容的div的子代，它是具有一类视图的div的子代 - 一种说话者的克隆 - 列表”。

CSS在多个级别中使用嵌套div和类

1 个答案: