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 - 基本特异性

回答

相关问题