如何选择 ID 以特定字符串开头和结尾的所有元素?

问题描述

在 CSS 中，如何选择所有 <tr> 元素，它们的 id 以 section_ 开头并以 _dummy 结尾?

In CSS, how can I select all <tr> elements where their id begins with section_ and ends with _dummy?

例如我想选择样式并将其应用到以下 <tr> 的:

E.g. I'd like to select and apply styles to the following <tr>’s:

<tr id="section_5_1_dummy">
    <td>...</td>
</tr>

<tr id="section_5_2_dummy">
    <td>...</td>
</tr>

推荐答案

下面的 CSS3 选择器将完成这项工作:

The following CSS3 selector will do the job:

tr[id^="section_"][id$="_dummy"] {
    height: 200px;
}

^ 表示 id 应该以什么开头.

The ^ denotes what the id should begin with.

$ 表示 id 应该以什么结尾.

The $ denotes what the id should end with.

id 本身可以替换为另一个属性，例如 href:

id itself can be replaced with another attribute, such as href, when applied to (for example) <a>:

a[href^="http://www.example.com/product_"][href$="/about"] {
    background-color: red;
}