1

通常、CSS は私のものですが、なぜこれがうまくいかないのか、どういうわけか唖然とします。CMS の目的で Cargo を介してサイトを構築しています。ここで確認できます: http://cargocollective.com/mikeballard

私のメニューには 5 つのメイン カテゴリがあり、それら (画像など) をクリックすると、そのカテゴリの作品のリストが表示されます。

<div id="menu_2444167" class="link_link">
    <a id="p2444167" name="mikeballard" target="" href="http://cargocollective.com/mikeballard/filter/images">Images</a>
</div>
<div id="menu_2444188" class="project_link">
    <a name="mikeballard" rel="history" href="mikeballard/#2444188/Ultra-Nomadic-Def-Smith-Cycle-2011">Ultra Nomadic Def Smith Cycle, 2011</a>
</div>
<!-- more divs here -->
<div id="menu_2444201" class="project_link">
    <a name="mikeballard" rel="history" href="mikeballard/#2444201/Archive">Archive</a>
</div>

基本的に、このセットの最後の div を選択し、その div に margin-bottom:15px を追加しようとしています。私は使用してみました：

.project_link:last-childまたは.project_link:last-of-typeしかし、それは機能していないようです。

Cargo に依存するようにあまり変更できない HTML は、アンカー タグを含む div の代わりにリスト アイテムを使用したかのように素晴らしいとは言えません。

4

1 に答える 1

2

:last-of-typeおよびセレクターは、:last-childIE9 より前ではサポートされていません。

およびセレクターに関しては、クラス名などは考慮されません。セレクターは、特定の要素が親要素の最後の子であり、クラス "project_link" を持つ場合にのみトリガーされ、特定の要素がそのタイプの最後の要素であり、クラス "project_link" を持つ場合にのみトリガーされます。:last-child:last-of-type.project_link:last-child.project_link:last-of-type

どちらも、サポートされているブラウザーでトリガーする必要があります。これは、その親内のすべてのタイプの要素を確認することが暗示されている*.project_link:last-of-typeためです (これはとにかく部門のみに見えます)。ここに示されている最後の区分には、このルールに一致するクラス「project_link」があります。これらがトリガーされない唯一の理由は、表示されているものの下に余分な要素 (または分割) がある場合、またはそれをサポートしていないブラウザーを使用している場合です。

于 2011-12-13T09:19:45.640 に答える