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'类，它不会引起冲突吗？

Answer 1

是的，这非常好，如果你愿意的话，你可以在.dom中共享归属。

编辑虽然，您不需要将类应用于所有元素，一旦表格有一个类，您可以通过以下方式定位子元素：

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

Answer 2

我会避免这种做法的可读性和维护性。它应该可行，但是你依赖微软等浏览器制造商在不受酸测试主题的领域从一个版本到下一个版本保持一致。按规则统治td.dom比.dom具有更多的特异性意味着它应该起作用。 th.dom“不应该”超过右td.dom的规则。

酸测试标准方法是

table.dom th {}

并产生更紧凑的HTML和CSS。

进行酸测试意味着如果浏览器无法正常工作，那就是浏览器的错误，但无论如何，你都可以解决它。

Jquery等都假设经过酸测试的css结构。

更新：如果它不适用于某些特定的浏览器，可能会打开一个全新的浏览器嗅探基因。

Answer 3

是的，您可以在选择器中执行此操作与目标标记之间的区别是什么？

如果您想定位这些标记的某个区域，可以为它们提供一个容器，并将其定位为.details th {...} .details td {...}

如果它是语义，你应该使用不同的类名。例如.detail-header {...} .detail-value {...}

Answer 4

就我所知，它不会引起任何冲突。

但是，如果你有另一个这样的选择器：

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

这里定义的样式适用于所有带有classname dom

的元素

Answer 5

绝对没问题。它不会引起冲突。

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

5 个答案: