如何在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>並覆蓋透明圖像，舊版瀏覽器可能會受到黑客的攻擊。