如何在CSS中为MVC4 Razor创建类层次结构？

Question

我正在学习如何使用MVC4和Razor在CSS中创建类。 我想为显示在首页上的表格创建一个类，并为带有删除线的td元素和一些td元素加粗显示特殊的标记类。 我不知道如何创建一个属于另一个类的类。 我觉得通过在表类中创建子类，我可以保持更井井有条的CSS代码。

我有几个问题。

• 如何创建从基表继承的新表类？

• 我应该将新类放在单独的CSS文件中吗？

• 如果对上一个问题的回答是“是”，那么我需要做些什么才能使Razor和MVC4看到新文件？

• 如何在该新表下创建一个td元素，并使其从基本表的基本td继承？

见下面的代码

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-right: 0.4em;
}
    th:first-child{
        margin-left:0px;
    }
    th:last-child{
        margin-right:0px;
    }
    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

Answer 1

要解决您的问题：

How do I create a new table class that inherits from the base table?

如果没有重置所有样式规则的css文件，则每个元素都将从浏览器默认文件继承。 如果您为表格元素表{....}定义样式规则并创建另一个样式规则.foo {}，则table.foo的css规则由默认样式，元素的定义样式以及特定样式组成样式。 您可以使用chrome开发人员工具和inspect元素对此进行测试。

Should I put new classes in a separate CSS file?

不可以，除非您有充分的理由。 只是为了澄清-经验法则将所有样式规则放在一个文件中。 但不是每个规则都在一个新的单独文件中。

How do I create a td element under that new table and cause it to inherit from the base td of the base table?

参见上面的td {background-color: red} td.bgBlue {background-color: blue}和html <td class="bgBLue">但是还有其他方法。 我建议您阅读有关CSS基本规则和样式规则继承的教程。

更新

I want to create a class for a table that ... with special markup for td elements with strikethrough, and some td elements bolded. 对于删除线（ css 2.1或css 3 ），您可以使用文本装饰 ，这似乎不太受支持 。 尽管可能浏览器兼容性表已过时，因为它在我测试过的两种浏览器（IE11和chrome31）中均有效。

.isBold { font-weight: bold;}           
.isStrikethrough {text-decoration:line-through; }

和HTML

<table>
    <tr><td class="isBold">bold</td></tr>
    <tr><td class="isStrikethrough">one</td></tr>
</table>

通过使用例如<del>your text</del>并覆盖透明图像，旧版浏览器可能会受到黑客的攻击。