爲什麼我可以覆蓋`li`的字體顏色而不是`P`標籤的內容？

Question

在此代碼：

... 
<div class="job-overview no-company-desc"> 
    <h2 class="job-overview-title">Overview</h2> 
    <p>Jamit&#8217;s client is looking for a Senior Software Engineer constantly iterating and pushing releases into production.</p> 
<p><strong>Qualifications:</strong></p> 
<ul> 
<li>Experience leading a team of developers by example – following excellent coding habits and best practices</li> 
<li>Experience in an Agile software development environment in a web context</li> 
<li>A thorough understanding of how business needs drive product features</li> 
<li>Demonstrated expertise with the entire software development life cycle</li> 
</ul> 
      </div> 

有各種不同的CSS樣式表，如通過我嘗試把我的CSS代碼，最後在頭對其進行覆蓋，即

<style type="text/css"> 
    p { color: blue; } 
    li { color: blue; } 
</style> 

這使得LI名單項目爲藍色，但不包含P內容。任何關於使P內容變藍的建議？

Answer 1

在當前的情況下，它很好 - 必須有更多的CSS具有更多的特異性。要麼刪除，要麼更具體。 !imporant將修復此問題，但我不要建議使用它。 Reason here.

如果您不能刪除原來的風格，嘗試overwritting吧..

div.job-overview.no-company-desc p { 
    color: blue; 
} 

或者，更具體地說，可以使用：（假設p如下h2。）

div.job-overview.no-company-desc h2 + p { 
    color: blue; 
} 

如果特異性不是答案，那麼解決方案就是應用CSS的順序。除此之外，如果您嘗試覆蓋內聯樣式 - 除非您使用!important，否則不能。