0

このCSSルールを適用しようとしています:

.question.paragraph .question_choices li:nth-of-type(1)
 {
  padding-bottom: 500px;
}

コンソールで動作します: $(".question.paragraph .question_choices li:nth-of-type(1)").css("padding-bottom", "500px"). jsfiddle で動作します。ブラウザでは動作しません。私はGoogle Chromeにいるので、nth-of-type疑似クラスが認識されます。ユーザーエージェントを確認しました。私はIEモードではありません。(簡略化された) HTML は次のとおりです。

<html class="no-js" lang="en"><!--<![endif]-->
  <head>
      <style type="text/css" media="screen" id="study_custom_style_applier">
        .question.paragraph .question_choices li:nth-of-type(1)
         {
          padding-bottom: 500px;
        }
      </style>
  </head>
  <body style="margin-left: 300px;">
    <div id="plain-container" style="margin-top: 128px;">
      <div id="body">
        <div class="question  paragraph" id="question_211681">
          <span class="question_label">p6_q1_Topic_2</span>
          <div class="question_title">
            Topic 2
          </div>
          <div class="question_choices">
            <ul>
                <li>stuff1</li> <!-- the rule should apply here - there should be 500px of bottom padding -->
                <li>stuff2</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

私の知る限り、ルールをオーバーライドするものは何もありません。

何か案は？ありがとう！

4

2 に答える 2

0

私の知る限り、ルールをオーバーライドするものは何もありません。

実際、オーバーライドされているようです。スクリーンショットに基づいて、CSS ファイルの 1 つに次のルールがあるように見えます。

#survey li {
    padding: 0 5px;
}

CSSの特異性により、#surveyID 参照が.question.paragraphクラス参照をオーバーライドしています。

ソリューション

あなたの投稿には HTML 全体が表示されていないので、あなたの#surveyタグが何であるかは推測することしかできません。解決策は実装によって異なります。次のいずれかを試してください。

  1. classに追加してから#surveyを使用すると、修正されるはずです。survey .survey li

     .survey li { padding: 0 5px; }

  2. nth-of-typeルールの先頭に#survey.

     #survey .question.paragraph .question_choices li:nth-of-type(1) { ... }

  3. ルールに追加!importantします。padding-bottom

     ... { padding-bottom: 500px !important; }
于 2013-06-06T05:57:32.630 に答える
0

2つの提案

1) ルールの後に !important を追加して、競合を無効にします。

.question.paragraph .question_choices li:nth-of-type(1)
 {
  padding-bottom: 500px !important;
}

2) 使用しているブラウザーが何であれ、疑似 CSS3 クラスセレクター :nth-of-type をサポートしていません。ドキュメントの読み込みに関する質問で示したように、スタイルをインラインで追加するか、jQuery を使用することができます。

$(".question.paragraph .question_choices li:nth-of-type(1)").css("padding-bottom", "500px")
于 2013-06-06T05:58:39.363 に答える