我有一个非常烦人和困惑的问题。我的网站有两种不同的表格。一种没有边框,另一种有。但是无论我做什么,我都不能把th和td样式从另一种表格中分离出来。第一个表没有类样式;我默认了一切。第二个表具有:
table.t01, th, td { border: 4px solid black; border-collapse: collapse; }
但是,这会影响第一个表. WTF的th和td的样式。我怎样才能解决这个问题?
yhived7q1#
通过在选择器中使用逗号,您可以说"此样式适用于类为t01的任何table,但也适用于任何th和任何td"。这对于合并许多具有相同样式的元素的样式设置非常有用。例如,以下内容是等效的:
t01
table
th
td
// The verbose way th { color: red; } td { color: red; } p.red { color: red; } div#firstred { color: red; } // The concise way th, td, p.red, div#firstred { color: red; }
如果你真正想要的是为th和td定义一个样式,而table是一个t01类的table的后代,那么只需要用一个空格来分隔table和th/td选择器的项:试试看:
table.t01 th, table.t01 td { border: 4px solid black; border-collapse: collapse; }
lhcgjxsq2#
如果您将样式更明确地应用于选择器,会发生什么情况(见下文):
table.t01, table.t01 th, table.t01 td { border: 4px solid black; border-collapse: collapse; }
yv5phkfx3#
下面是另一个略短的替代方案:
<style> #myTable th, td { border: 4px solid black; border-collapse: collapse; } </style> ... <table id="myTable"> ... </table>
3条答案
按热度按时间yhived7q1#
通过在选择器中使用逗号,您可以说"此样式适用于类为
t01
的任何table
,但也适用于任何th
和任何td
"。这对于合并许多具有相同样式的元素的样式设置非常有用。例如,以下内容是等效的:
如果你真正想要的是为
th
和td
定义一个样式,而table
是一个t01
类的table
的后代,那么只需要用一个空格来分隔table
和th
/td
选择器的项:试试看:
lhcgjxsq2#
如果您将样式更明确地应用于选择器,会发生什么情况(见下文):
yv5phkfx3#
下面是另一个略短的替代方案: