解决方案

Question

我正在尝试应用此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")。 It works in 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>

据我所知，没有什么能超越规则：

有什么想法吗？谢谢！

Answer 1

据我所知，没有什么能超越规则：

实际上，它似乎被覆盖了。根据您的屏幕截图，我认为您在一个CSS文件中有以下规则：

#survey li {
    padding: 0 5px;
}

由于CSS specificity，#survey ID引用会覆盖您的.question.paragraph类引用。

解决方案

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

添加#survey survey 类，然后使用.survey li，应修复它。< / p>
```
.survey li { padding: 0 5px; }
```

使用nth-of-type。{/ p>添加#survey规则

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

将!important附加到您的padding-bottom规则。
```
... { padding-bottom: 500px !important; }
```

Answer 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")

CSS规则尚未应用

2 个答案:

解决方案