CSS - 基本特異性

我有一個有很多列的HTML表格。我想在除1之外的所有列上設置text-align: center。CSS - 基本特異性

我聽說使用！重要的和不必要的嵌套是不被贊同的。什麼是實現這一目標的「最佳」方式？

使用!important：

#my-table td { 
    padding: 5px; 
    text-align: center; 
} 

.my-table-special-td { 
    text-align: left !important; 
}

不必要的嵌套：

#my-table td { 
    padding: 5px; 
    text-align: center; 
} 

#my-table .my-table-special-td { 
    text-align: left; 
}

或其他方法？

所謂「最好的」我的意思是： *符合CSS最佳做法 *良好的性能

來源

2014-02-24 user3117610

你的意思是_不必要的嵌套_？ – putvande

@ user3117610也許你可以在這裏得到一些想法http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i – STP38

你可以添加一個班級嗎？ –

就個人而言，我用!important爲「覆蓋」類。事情是這樣：

.center {text-align:center !important} 
.right {text-align:right !important}

等等 - 如果我的元素指定class="right"，那是因爲我特別希望它右對齊和!important有助於反映這一點。

但是在更一般的情況下，您應該避免!important - 主要是因爲一旦您使用!important，就無法再重寫它了！

來源

2014-02-24 09:57:06

你應該做的是這樣的：

.tableAll td{ 
padding: 5px; 
text-align: center; 
}

，你只是想中心只有那麼爲什麼定義類。在這種情況下，內聯樣式將起作用，並將覆蓋.tableAll的匹配樣式。

<table class="tableAll"> 
<tr> 
    <td style="text-align: center;"></td> 
    <td >other all</td> 
</tr> 
</table>

我不推薦使用!important。

來源

2014-02-24 10:02:35 Ashwani

我不喜歡混合內聯CSS的想法，我認爲這不是最佳實踐。 – user3117610

@ user3117610內聯樣式很好，如果它不會太長，並且會混淆標籤。如果它是'.class'是最佳實踐。在你的情況下，有一個，你並沒有到處寫。 – Ashwani

其實，這兩種解決方案都很好使用!important和築巢，

你不應該使用!important過於頻繁，因爲它一旦蔓延，你在使用它一遍又一遍，你會回到開始（困難指定要覆蓋其他樣式的元素，應用），，但在這種特殊情況下，您沒有問題，因爲!important規則僅影響1個元素。

嵌套也工作好，只要你使用它的特殊情況，而不是對每一個元素，因爲一旦你這樣做，你的代碼將無法讀取，你會在改善和再保一個非常艱難的時間。

來源

2014-02-24 10:04:26 CodeFanatic

請勿使用!important，除非您沒有其他選擇。

#my-table td { 
    padding: 5px; 
    text-align: center; 
} 

.my-table-special-td { 
    text-align: left; 
}

你不需要！因爲它覆蓋了前一個，所以不需要！重要的是.my-table-special-td。

這裏有一個例子是jsFiddle

在這種情況下，如果你指定text-align.my-table-special-td後不同可能覆蓋它，所以在使用!important讓你確信它不會改變。

來源

2014-02-24 10:10:24 Ismatjon

我不認爲這有效。「.my-table-special-td」不如「#my-table td」規則具體，所以它仍然居中。 – user3117610

@ user3117610你說得對。那麼既然在我的網站上超過100臺的唯一方法是使用！重要 – Ismatjon

#my-table td { 
    padding: 5px; 
    text-align: center; 
} 

#my-table td.my-special-td { 
    text-align:left; 
}

可以說，你說你想所有td元素對齊到中心，你不需要#my-table選擇。

更可重複使用的方法是去除id，只是有：

td { text-align:center; } 
td.left-align { text-align:left;} 
td.right-align {text-align:right;}

那麼你可以申請對準任何td任何地方，以及覆蓋，如果你通過添加id的需要表格後面。

來源

2014-02-24 10:11:22 Ross

，我確實需要的＃我的表說明符。但是，由於沒有其他表具有my-table-special-td，因此指定「＃my-table」似乎是多餘的。 – user3117610

爲了表現明智，對所有css使用內聯樣式。這是Google郵件（Gmail）使用的技術，我認爲Yahoo!郵件以及。所以，如果它是你想要的速度。使用內聯樣式的一切。老實說，我不會去那條路線，因爲它不提供乾淨和可重複使用的代碼。

所以，我會去最乾淨的解決方案，這是給元素的類名稱，並避免使用！重要的。這是絕對皺眉，它不必被用來誠實。該表將尊重您的表格元素上的您的類名稱。這提供了一個更清潔的CSS，最終適用於所有瀏覽器。如果你在一般重寫類，這意味着你可能想重新思考你的CSS的架構。我不是說你做錯了，但我們正在談論做事的最佳方式不是我們嗎？ :)

快樂編碼！

來源

2014-02-24 10:15:48

我不會推薦使用!important。在你的情況下使用text-align: center你可以居中文本，如果你想要任何列文本應該是left-align你可以爲該column做一個特定的類或更好地使用一些高級CSS3。

在這個例子中，我想更改的Last Column並希望應用類。

我可以通過添加這種風格來做到這一點。

table tr:last-child td:nth-child(5) {background:red;}

或者更好的檢查這個例子。 http://jsbin.com/mizotofe/1/

來源

2014-02-24 10:24:47

CSS - 基本特異性

回答

相關問題