css - nth-child がギャラリーで特定の画像を選択しない

Question

CSS でスタイルを設定しようとしているギャラリーがあります。具体的には、特定の番号の div を探し、デフォルトの高さをオーバーライドする新しい高さをピクセル単位で適用する CSS を作成しようとしています。これは、他の正方形の画像と比べて縦長で高さが必要な画像があるためです。

ギャラリーの実際の例を次に示します。

http://kylework.com/

私が使用しているCSSの例を次に示します。

html body div#page_div div#page_content.full_width div.container_div  div#mainworkpanelsheet div.mainworkpanel div:nth-child(2)
{
height: 200px!important;
}

上記のコードから、2 番目の div/image のみをスタイル設定する必要があります。代わりに、すべてのギャラリー div がスタイル設定されます。「div.mainworkpanel:nth-child(2)」も試しましたが(どちらがより正確だと思いますか?)、それも何もしません。また、div[style="imageURL.jpg"] を介して、「background-image」プロパティで各 div を選択しようとしましたが、それも機能しないようです。

ギャラリー内の div の CSS クラスを制御することはできません。それらはすべて同じです (「mainworkpanelthumb」)。このギャラリーは、XML ファイルを介して jquery によって生成されています。サムが生成された後、CSS で画像のプロパティをオーバーライドすることはできませんか?

ありがとう！

Answer 1

代わりにこれを使用してください：

div.mainworkpanel:nth-child(3) div.mainworkpanelthumb {
background: red;
height:1500px !important;

}

Answer 2

機能する最短のセレクターは次のとおりです (テスト済み)。

div.mainworkpanel:nth-child(3) div.mainworkpanelthumb {
    background: red;
    height:1500px !important;
}

ギャラリー内の特定のコンテナーを選択します。このコンテナ内で、画像を保持する子の高さを設定します。!importantこれらすべてのコンテナには、CSS ルールをオーバーライドするインライン スタイルがあるだけでなく、使用する必要があります。

Answer 3

nth-child(2) の代わりに nth-of-type(2) を使用