Question

这是一个普遍的问题，给定一个html组件（例如一个表），我想添加一个新的css类来覆盖当前的。例如，我想覆盖下表的td悬停，添加一个新类，以便不影响使用这些类的其他表：

html（使用bootstrap类）

<table id="calDate" class="table table-striped table-bordered table-condensed table-hover alignCenter">
<tbody>
<tr>
<td>
<tbody>
</tbody>
table>

CSS

table {
max-width: 100%;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
}

.table {
width: 100%;
max-width: 90%;
margin-bottom: 5px;
}

.table th,
.table td {
padding: 8px;
line-height: 20px;
text-align: left;
vertical-align: top;
border-top: 1px solid #dddddd;
}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
 background-color: #f5f5f5;
}

我尝试覆盖最后一个类，创建一个名为.alignCenter的新类，尝试更改td悬停行为以及text-align，该对齐工作但鼠标悬停在它上面不起作用：

.alignCenter {

}

.alignCenter-hover tbody tr:hover > td,
.alignCenter-hover tbody tr:hover > th {
 background-color: #df8505;
}

.alignCenter th, .alignCenter td{
 text-align: center;
 }

创建一个新的css类而不是现有类的常用方法是什么？
如何使用新创建的css类来更改td悬停行为，例如更改背景颜色？
在示例中，类.table的max-width：100％;并且它在下面再次定义，最大宽度：90％;表中使用了哪个最大宽度，为什么？

Answer 1

好的，让我逐一回答你的问题：

-1。什么是创建一个新的css类而不是现有类的常用方法？

您可以通过修改类本身或者为同一元素上的另一个类添加不同的值（或内联样式）来覆盖它们。

-2。如何使用新创建的css类来更改td悬停行为，例如更改背景颜色？

只需这样做：

tr:hover td {
    /* do hover stuff */
}

-3。在示例中，类.table的max-width：100％;并在下面再次定义最大宽度：90％;。表格中使用了哪个最大宽度，为什么？

在CSS中，它始终是最近（最后）命令，将赢得＆＃34;胜利＆＃34;。但是，您可以使用!important覆盖它，如下所示：

.table {
    /* ... */
    max-width: 90% !important;
    /* ... */
}

还有更多：摆脱table-hover，这是不必要的;相反，设置它的悬停变化：

.table:hover {
    /* stuff goes here */
}

Answer 2

看看这个： http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

其他类下面的类的类属性将计数（因此样式表的顺序很重要），否则你可以使用ex：

max-width:90%!important;

或选择更具体的选择器

Answer 3

事情是，

你必须创建新的课程。

.old
{
//already have
}
.new
{
// do your stuff with !important so it will take this
// background-color:#fff !important
}

或

td:hover > .new
{
// do your stuff
}

覆盖css类，创建一个新的css类

3 个答案: