0

（始める前に、はい、以前に同様の質問をしました。残念ながら、新しい情報が追加されたため、マークアップは完全に悪化し、今では理解できません。）

Drupal ビューによって生成された非常に醜いマークアップがあります。クラス名の多くは、階層のさまざまなレベルの複数の場所で使用できるため (たとえば、最初のview-content/view-grouping/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;      
}

これは、「view-clone-of-speaker-list のクラスを持つ div の子である、view-content のクラスを持つ div の子である、view-grouping のクラスを持つ div」を意味します。

于 2012-06-12T17:43:52.797 に答える