0

（在我开始之前，是的，我之前问过类似的问题；不幸的是，由于添加了新信息，标记已经完全变坏了，现在我无法弄清楚。）

我有一些由 Drupal 视图生成的非常难看的标记。因为许多类名可以在多个地方使用，在层次结构的各个级别（例如，第一个view-content/view-grouping/view-grouping-header需要向左浮动（或者至少它的内容用于爆头图像，但其他 view-grouping-header 元素需要显示在图像的右侧），我不能只处理类名；我需要获得完整的层次结构。我遇到了一些麻烦......（我知道有人会过来说，“但是你可以在 Drupal 视图中向字段添加类；为什么不这样做呢？”好吧，如果你正在显示，你可以单个字段，但在这种情况下，我需要按显示的 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-clone-of-speaker-list.div.view-content.div.view-grouping {
    border: 1px solid #a8a8a8;      
}

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

这是期望的结果；对于实际的样式代码，我不需要帮助（我不认为！）；我只需要一只手来弄清楚如何处理正确的元素，因为它们嵌套得非常糟糕。 在此处输入图像描述

4

1 回答 1

2

选择器上的句点表示“类”；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 的子级”。

于 2012-06-12T17:43:52.797 回答