在前端开发中，我们经常需要通过选择器选中一些具有特定属性值的元素。很多人都知道如何使用 CSS 选择器来选中某个具有特定 ID 的元素，但是如果要选中所有 ID 属性以特定字符开头或结尾的元素呢？本文将介绍如何做到这一点。
根据 ID 属性选择元素
首先，让我们回顾一下如何使用 CSS 选择器根据 ID 属性选择元素。在 HTML 中，可以为元素设置一个唯一的 ID 属性，通过该属性可以快速地找到该元素。例如：
<div id="myDiv">Hello World!</div>
在 CSS 中，我们可以使用 # 符号来选中具有特定 ID 属性的元素。例如，要选中上面的 <div> 元素，可以使用以下选择器：
#myDiv {
color: red;
}这将把颜色设置为红色的文本放置在具有 ID 属性为 "myDiv" 的元素内。
选取以特定字符开头的 ID 属性元素
现在，假设我们想要选取所有 ID 属性以特定字符开头的元素。在 CSS 中，我们可以使用 [attribute^=value] 选择器来实现这一目标。其中 ^= 表示属性值以指定字符串开头。例如，要选中所有 ID 属性以 "nav_" 开头的元素，可以使用以下选择器：
[id^="nav_"] {
font-weight: bold;
}这将把所有 ID 属性以 "nav_" 开头的元素的字体加粗。
选取以特定字符结尾的 ID 属性元素
类似地，如果我们想要选取所有 ID 属性以特定字符结尾的元素，可以使用 [attribute$=value] 选择器。其中 $= 表示属性值以指定字符串结尾。例如，要选取所有 ID 属性以 "_link" 结尾的元素，可以使用以下选择器：
[id$="_link"] {
text-decoration: underline;
}这将在所有 ID 属性以 "_link" 结尾的元素上添加下划线文本装饰。
总结
通过使用 CSS 选择器中的 [attribute^=value] 和 [attribute$=value] 选择器，我们可以轻松地选取 ID 属性以特定字符开头或结尾的元素。这对于样式化网站和 JavaScript 操作 DOM 元素非常有用。
示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
-- ------ --- -------- ---- -- -- ---- ------ ---- ------ --
------------ -
------ -----
-
-- ------ --- -------- ---- -- -- ---- ---- ---- ------- --
------------- -
---------------- ----------
-
--------
-------
------
---- ------------------------
---- -------------------- --------
-- -------- ------------------- ------
-- -------- -------------------------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29920