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。它在浏览器中不起作用。我在谷歌浏览器中，所以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 文件中有以下规则：

#survey li {
    padding: 0 5px;
}

由于CSS 的特殊性，#surveyID 引用会覆盖您的.question.paragraph类引用。

解决方案

您没有在帖子中显示整个 HTML，所以我只能猜测您的#survey标签是什么。解决方案取决于您的实施。尝试以下方法之一：

  1. 添加到#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

两个建议

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 回答