将另一个CSS选择器添加到peusdo选择器

Question

我正在使用Chris Coyer的一个CSS Tricks，它适用于一个表，但是我想在50个表上实现它

table.marin th:nth-of-type(1):before { content: "Rowland Blvd"; }

和

th.marin:nth-of-type(1):before { content: "Rowland Blvd"; }

不起作用，但第二个使用p元素，但似乎不适用于th元素。任何想法，解决方案或解决方案？

以下是Chris的原始article，以确切了解我正在做什么（隐藏当前标头并在移动视图中显示较小的标头）

Answer 1

在:before或th上使用td等伪元素意味着您在其之前或之后插入内容。这可能会打破表格布局。

为了避免跨浏览器兼容性问题，我建议您在div元素中使用p或th容器，并在该元素上添加伪元素。

Answer 2

实际上当我试图自己解决这个问题时，我将我的代码格式改为td，当我将我的代码与原始的CSS Tricks页面进行比较时，我注意到了这个错误。一旦我改变我的选择器 table.marin th：nth-​​of-type（1）：before {content：“Rowland Blvd”; } to table.marin td：nth-​​of-type（1）：before {content：“Rowland Blvd”; } 它确实有效。

我的回答是在我自己的表条带代码中： tbody.stripe tr：nth-​​of-type（2n）{background-color：＃F9F9F9;}

我还检查了Safari，IE10，Firefox最新和Chrome最新的代码，一切似乎都做得很好。