1

ID またはクラスの関連付けがない div のスタイルを設定する方法を探しています。変更しようとしているコードは wordpress プラグインの一部であるため、ID またはクラスを div 自体に適用することを示唆するコメントは探していません。更新すると、適用するスタイルがリセットされます。

変更しようとしているコードは次のとおりです。

<div class="gallery_detail_box">
    <div><?php echo $post->post_title; ?></div>
    <div><?php echo the_excerpt_max_charlength(100); ?></div>
    <a href="<?php echo $permalink; echo basename( get_permalink( $post->ID ) ); ?>"><?php echo $gllr_options["read_more_link_text"]; ?></a>
</div>

太字にしたいので、「post_title」を含む div をターゲットにしようとしましたが、いくつかの異なる方法を試しましたが、役に立ちませんでした。その div をターゲットにする最後の試みは次のとおりです。

.gallery_detail_box > #div {
    font-weight:bold;
}

.gallery_detail_box #div #div {
    font-weight:normal;
}

どこが間違っていますか？

4

6 に答える 6

2

#ID を参照するときに使用されます。div は ID ではなくタグです。

試す

.gallery_detail_box div {
   font-weight: bold;
 }
于 2012-10-24T21:51:23.640 に答える
1

使用しているブラウザによっては、これが機能する場合と機能しない場合があります。古いバージョンの IE(7,8) や、CSS 3 をサポートしていないその他のブラウザーでは機能しません。

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:nth-child(1){
    font-weight:bold;
}

古いブラウザの場合

.gallery_detail_box {
    font-weight:normal;
}

.gallery_detail_box div:first-child{
    font-weight:bold;
}

次に、古いブラウザーで 2 番目、3 番目などのネストされた div にカスタム スタイルを適用するには、次のようにします。

.gallery_detail_box div:first-child + div{
    font-weight:bold;
}
/*(second)*/
.gallery_detail_box div:first-child + div + div{
    font-weight:bold;
}
/*(third)*/

等

于 2012-10-24T21:57:59.877 に答える
1

#サインを取り出します。タイプ セレクターをターゲットにする場合は、接頭辞なしでセレクター名を使用します。

于 2012-10-24T21:51:25.680 に答える
1

子 DIV のそれぞれをターゲットにするには、これを試してください。

div.gallery_detail_box div:nth-child(1) {....}
div.gallery_detail_box div:nth-child(2) {....}

幸運を。

于 2012-10-24T21:52:32.550 に答える
0

divにクラスを与えます。ブラウザの最適化が不十分です。

.class div{}

これは、要素にcssを追加するときに、ブラウザがdomを逆検索するためです。

https://developers.google.com/speed/docs/best-practices/rendering

于 2012-10-24T22:01:54.667 に答える
0

これを行う最も簡単な方法は、最初の子の疑似セレクターを使用することです。

.gallery_detail_box div:first-child {
    font-weight: bold;
}

これは、古いブラウザに影響を与えます。MDN 互換性チャートをチェックして、ターゲット ブラウザーのいずれかが影響を受けているかどうかを確認してください: https://developer.mozilla.org/en-US/docs/CSS/:first-child

最初の要素を超えて子要素をターゲットにする必要がある場合は、:nth-child(2)疑似セレクターを使用できます。

もう 1 つのオプションは、JavaScript を使用することです。これは、JavaScript をサポートするすべてのブラウザーで確実に動作します。

于 2012-10-24T21:53:46.680 に答える