我可以为不同元素样式使用相同的类名吗？

Question

是否可以为不同样式的元素使用相同的类名？例如：

是可以的。

table.dom {
    background-color: #F9FAFA;
    float: right;
    border-collapse: collapse;
    display: inline-block;
    width: 352px
}
th.dom {
    background-color: #8FA4AD;
    color: #fff;
    font-size: .8em;
    padding: 8px 0;
    border: #2C3A44;
    border-width: 1px;
    border-style: solid;
    width: 88px;
}
td.dom  {
    font-size: .7em;
    border-color: #313841;
    background-color: #F9FAFA;
    border-width: 1px;
    border-style: solid;
    height: 30px;
    }

我假设如果我为不同的元素调用“dom”类，它不会引起冲突？

- Tintin

Answer 1

是的，这完全没问题，如果您希望，可以在.dom内使用共享属性。

但是请注意，您不需要对所有元素应用类。一旦表具有类，您可以通过以下方式定位子元素：

table.dom th {
    /*Style info*/
}
table.dom td {
    /*Style info*/
}

- Wobbles

Answer 2

我建议避免这种做法，以提高可读性和维护性。但是，如果您依赖于浏览器制造商（如微软）在不受酸测试主题限制的领域中保持一致，那么它应该可以工作。按照规则，td.dom比.dom具有更高的特异性，这意味着它应该可以工作。th.dom“不应”覆盖td.dom的规则。

酸测试标准方法是：

table.dom th {}

这会导致 HTML 和 CSS 更加紧凑。

通过酸测试，如果它不起作用，则是浏览器的问题，但无论如何，您都需要修复它。

Jquery 等都假定经过酸测试的 CSS 结构。

更新：如果在某些特定浏览器上不起作用，那可能会开启全新的浏览器嗅探。

- Wayne

Answer 3

是的，你可以这样做，但是与仅在选择器中定位标签有什么区别呢？

如果要定位这些标记的特定区域，可以为它们提供一个容器，并像这样针对它们进行定位：.details th {...} . details td {...}

如果是为了语义而定位，应该使用不同的类名。例如：.detail-header {...} .detail-value {...}

- pochen

Answer 4

据我所知，它不会造成任何冲突。

但是，如果您有另一个选择器，如下所示：

.dom {
  font-weight:bold;
  ...
}

那里定义的样式将应用于所有类名为dom的元素

- brilletjuh

Answer 5

完全没问题，不会产生冲突。

- Rahul Ramesh