Question

假设我有一个已分配给类dependency_table的HTML表。

如何设置特定表的tr，th和td子项的样式，而不必将class="dependency_table"放入所有儿童标签？

这是我到目前为止所尝试的内容：

/* --- DEPENDENCY TABLE STYLING --- */
.dependency_table {
    border-collapse: collapse;
    color: pink;
}

.dependency_table ~ td {
    background: #FAFAFA;
    text-align: center;
}

.dependency_table ~ th{
     background: #DFDFDF;  /* Darken header a bit */
     font-weight: bold;
}

使用这种语法，一般的兄弟选择器还没有为我工作。这样做的正确方法是什么？

Answer 1

如果我理解正确你想要这样做：

/* --- DEPENDENCY TABLE STYLING --- */
.dependency_table {
    border-collapse: collapse;
    color: pink;
}

.dependency_table td {
    #your style
}

.dependency_table th{
     #your style
}

.dependency_table tr{
         #your style
    }

Answer 2

另一种替代方案可以同时覆盖更多标签：

＆＃13;

.dependency_table td, .dependency_table tr, .dependency_table th{
  #your style
}

＆＃13;

CSS：如何将类特定的样式级联到子级

2 个答案: