html - 多个类几乎没有相同的名称

Question

我有一个小问题，似乎互联网上没有地方可以找到答案，除了这里：p

所以我有html一些页面tables。那些tables有线条（像往常一样：p），在那些线条中它们是一些inputs. 我想在我的 css 文件中添加一条对所有这些行都有影响的规则。这些行具有id几乎相同的语义。

这是我的代码：

<table>
    <tr id="tr_creneau_1">
        <td>
            <input />
        </td>
    </tr>
    <tr id="tr_creneau_2">
        <td>
             <input />
        </td>
    </tr>
</table>

<table>
    <tr id="tr_logo_1">
       <td>
           <input />
       </td>
    </tr>
</table>

最后，我想要一个影响 tr_* 行中所有输入的 CSS 规则。

Answer 1

您可以尝试：

tr[id^="tr_"] input

但这是一个 css 3 选择器，它不适用于所有浏览器，或者您可以简单地使用：

tr input

或向具有该 ID 的每一行添加一个类并匹配该类

Answer 2

您始终可以为您希望定位的每个表格行添加一个 CSS 类。例如

<table>
    <tr id="tr_creneau_1" class="style-me">
        <td>
            <input />
        </td>
    </tr>
    <tr id="tr_creneau_2"  class="style-me">
        <td>
            <input />
        </td>
    </tr>
    <tr id="somethingElse">
        no input, so no class needed
    </tr>
</table>

然后样式如下：

table .style-me input {
    background-color: red;
}

Answer 3

你可以试试：

tr[id^="tr_"] { --your css here-- }

tr如果它们的 id 以 . 开头，它将检查所有标签tr_。

如果它不需要位于 id 属性的开头，只需位于 random 的某个位置，您可以使用：

tr[id*="tr_"]

如果上述方法不起作用，我建议采用基于类的方法。