爲什麼我更具體的CSS樣式不覆蓋Bootstrap？

我無法讓我的CSS樣式覆蓋Bootstrap默認的對齊表格標題。這裏是我的表：爲什麼我更具體的CSS樣式不覆蓋Bootstrap？

<table class="userProjectsTable" id="userLeadProjectsTable"> 

    <tr class="userProjectsHeaderRow" id="userLeadTableHeaderRow"> 
     <th>Project Title</th> 
     <th>Created Date</th> 
     <th>Currently Active</th> 
     <th>Go to Project Workspace</th> 
    </tr> 
    <tr> ...rest of rows... </tr> 
</table>

而這裏的CSS的一點我使用格式化：

.userProjectsTable { 
    text-align: center; 
    width: 95%; 
    border-radius: 7px; 
} 

#userLeadTableHeaderRow { 
    background-color: rgba(6, 47, 55, .9); 
    text-transform: uppercase; 
    text-align: center; 
    font-size: 1.1em; 
    border: 3px solid white; 
    border-radius: 7px; 
    height: 20px; 
}

但當我查看源代碼，它說，它正在從引導的文本對齊方式table.less CSS工作表。而違規styleization來自這裏：

th { 
text-align: left; 
}

它是如何，元素選擇，得分爲1，是壓倒既是類和ID選擇？

來源

2017-08-06 NateH06

確保您的自定義CSS是原來的引導下面的CSS（文件） – Jer

你能澄清你的下面是什麼意思？ – NateH06

你不是針對你的css中的th元素。

如果要覆蓋引導，目標在th元素，像這樣：

#userLeadTableHeaderRow th { 
    text-align: center; 
}

來源

2017-08-06 17:54:03

有趣，這工作！我以爲'th'會從'.userProjectsTable'或'#userLeadTableHeaderRow'中繼承'text-align'樣式，因爲它是兩者的孩子。 – NateH06

Bootstrap設置th元素的Text Align屬性;你重寫了Table和Tr元素的CSS。

您需要重寫th或td元素的樣式才能使屬性正常工作。

來源

2017-08-06 17:53:18

爲什麼我更具體的CSS樣式不覆蓋Bootstrap？

回答

相關問題