覆盖我无法访问的CSS引导程序属性

Question

我正在尝试找到一个CSS技巧，以使td单元格的内容居中对齐。

所以html结构是

<tr class="myLine">
    <td class="notMyCell"> content cell </td>
</tr>

默认情况下，td上的默认引导程序设置为vertical-align:top。

问题是，我的应用程序部分无法处理td的全部内容。这意味着我无法在vertical-align:middle类上设置.notMycell。我什至不能在此td上放置嵌入式CSS。我无法控制整个生产线。我不能只为notMyCell类创建自己的CSS，因为有一天该类名可能会更改。

我正在尝试将属性设置为myLine类，这将使我可以从td中选择一个属性。

我什至不确定这是否可能。

感谢您的协助，可以采纳任何想法。

Answer 1

您说class可能会改变。
因此，您可以使用data属性来查找元素。

<tr class="myLine" data-id="customrow">
    <td class="notMyCell"> content cell </td>
</tr>

，然后在您的css

中

[data-id="customrow"] > td {
    vertical-align: ... !important;
}

使用!important覆盖css。

Answer 2

是的，有可能，我们只需要编写这样的代码-：

• 如果使用CSS

  scaleType=fitCenter

• 如果您使用的是SCSS / LESS

  .myLine > td {
      // your custom css
  } 
  

Answer 3

CSS选择器都是关于特异性的。选择器越具体，则在决定使用哪种样式时优先级越高。

之所以如此重要，是因为.myLine > td的具体含义比.notMyCell少，因此您在第一个选择器上设置的所有样式的优先级都低于在{selector上设置的样式第二。

但是，您可以尝试更加具体：

tr.myLine > td.notMyCell {
    vertical-align: ...
}

比.notMyCell更具体。

当然，您总是可以使用!important来覆盖它（尽管它不是一个很好的解决方案imo）：

.myLine > td {
    vertical-align: ... !important;
}