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

Question

(在我开始之前，是的，我之前问过 similar question；不幸的是，由于添加了新信息，标记已经完全变糟了，现在我无法弄清楚。)

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

<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 分组 - 我想在整个事物周围放置一个边框:

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

但是根据 Firebug 的说法，该元素没有得到那种样式。

这是期望的结果；我不需要有关实际样式代码的帮助(我不认为!)；考虑到它们嵌套得多么糟糕，我只需要帮助弄清楚如何处理正确的元素。

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;      
}

这意味着“具有 View 分组类的 div，它是具有 View 内容类的 div 的子级，它是具有 View 克隆扬声器类的 div 的子级-列表”。