我試圖將此CSS規則：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>

據我所知，沒有什麼是壓倒一切的規則：

任何想法？謝謝！

來源

2013-06-06 Bad Request

它看起來像'#survey li {padding：0 5px; ''重寫它。我錯過了什麼嗎？ – Eric

發送在線鏈接。 – Nitesh

OT，微優化：'ul'元素只能有'li'子元素，所以你可以安全地用'：nth-child（）'替換'：nth-of-type（）''' – FelipeAls

據我所知，沒有什麼是壓倒一切的規則：

事實上，它看起來是被覆蓋。根據您的截圖，它看起來像你對我有你的CSS文件之一以下規則：

#survey li { 
    padding: 0 5px; 
}

因爲CSS specificity中，#survey ID參考覆蓋您的.question.paragraph類引用。

解決方案

您還沒有顯示在您的文章全HTML，所以我只能猜測你的#survey標籤是什麼。解決方案取決於您的實施。請嘗試以下的一個：

添加到#survey一個survey類，然後使用.survey li，這應該修復它。
```
.survey li { padding: 0 5px; } 
```

前面加上你的nth-of-type規則與#survey。

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

追加!important您padding-bottom規則。

... { padding-bottom: 500px !important; }

來源

2013-06-06 05:57:32 Eric

謝謝，我今天學到了一些東西！ –

兩個建議

1）添加！規則後，重要的是要覆蓋任何衝突。

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

2）無論您使用哪種瀏覽器都不支持僞CSS3類選擇器：nth-type。您可以嘗試添加內聯樣式或使用jQuery，如您在文檔加載問題中所示。

$(".question.paragraph .question_choices li:nth-of-type(1)").css("padding-bottom", "500px")

來源

2013-06-06 05:58:39 James

CSS規則不被應用

回答

解決方案

相關問題