Question

我有一个小问题，似乎互联网上找不到答案的地方除外：p

所以我的html页面有一些tables。 Those 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类。 e.g。

<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-- }

如果他们的ID以tr开头，它会检查所有tr_代码。

如果它不需要在id属性的开头，只是随机的某个地方，你可以使用：

tr[id*="tr_"]

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

具有几乎相同名称的多个类

3 个答案: