如何为带递增标识的多ID元素设置CSS样式（替换图片按钮）

1. 隐藏指定图片元素 #

你原选择器.img#bfPickFiles无效，因为它匹配的是**class为img且id严格等于bfPickFiles**的元素，但你的目标是id以bfPickFiles开头的img标签。正确选择器使用CSS属性前缀匹配：

img[id^="bfPickFiles"] {
    display: none !important;
}

• [id^="bfPickFiles"]：精准匹配所有id以bfPickFiles开头的img元素，覆盖#bfPickFiles1932、#bfPickFiles1933等目标标签。

2. 为指定范围的div设置自定义按钮样式 #

针对id格式为bfPickFiles[数字]holder（数字3281-3745）的div，结合CSS属性匹配选择器覆盖目标范围，同时应用你需要的样式：

/* 基础样式：匹配所有id以bfPickFiles开头、以holder结尾的div */
div[id^="bfPickFiles"][id$="holder"] {
    display: block !important;
    background-image: linear-gradient(to top, #a6a6a6, #afafaf, #b7b7b7, #c0c0c0, #c9c9c9);
    width: 180px;
    height: 30px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    cursor: pointer; /* 增加指针样式，提升交互体验 */
}

/* 鼠标悬停效果 */
div[id^="bfPickFiles"][id$="holder"]:hover {
    background-image: linear-gradient(to top, #7c7c7c, #858585, #8e8e8e, #989898, #a1a1a1) !important;
}

/* 前置Font Awesome图标 */
div[id^="bfPickFiles"][id$="holder"]::before {
    font-family: "Font Awesome 5 Free";
    content: "\f574";
    display: inline-block;
    font-size: 20px;
    color: #fff;
    padding-right: 2px;
    padding-left: 6px;
    padding-top: 3px;
    font-weight: 600;
}

/* 后置文本 */
div[id^="bfPickFiles"][id$="holder"]::after {
    content: "CHARGER UN DOCUMENT";
    font-size: 0.75em;
    padding-left: 3px;
    color: #fff;
}

/* 过滤数字不在3281-3745范围内的元素（按需保留） */
/* 排除3281以下的元素 */
div[id^="bfPickFiles0"][id$="holder"],
div[id^="bfPickFiles1"][id$="holder"],
div[id^="bfPickFiles2"][id$="holder"],
div[id^="bfPickFiles30"][id$="holder"],
div[id^="bfPickFiles31"][id$="holder"],
div[id^="bfPickFiles320"][id$="holder"],
div[id^="bfPickFiles321"][id$="holder"],
div[id^="bfPickFiles322"][id$="holder"],
div[id^="bfPickFiles323"][id$="holder"],
div[id^="bfPickFiles324"][id$="holder"],
div[id^="bfPickFiles325"][id$="holder"],
div[id^="bfPickFiles326"][id$="holder"],
div[id^="bfPickFiles327"][id$="holder"],
div[id^="bfPickFiles3280"][id$="holder"] {
    display: none !important;
}

/* 排除3746以上的元素 */
div[id^="bfPickFiles375"][id$="holder"],
div[id^="bfPickFiles376"][id$="holder"],
div[id^="bfPickFiles377"][id$="holder"],
div[id^="bfPickFiles378"][id$="holder"],
div[id^="bfPickFiles379"][id$="holder"],
div[id^="bfPickFiles38"][id$="holder"],
div[id^="bfPickFiles39"][id$="holder"],
div[id^="bfPickFiles4"][id$="holder"],
div[id^="bfPickFiles5"][id$="holder"],
div[id^="bfPickFiles6"][id$="holder"],
div[id^="bfPickFiles7"][id$="holder"],
div[id^="bfPickFiles8"][id$="holder"],
div[id^="bfPickFiles9"][id$="holder"] {
    display: none !important;
}

补充说明 #

• [id^="bfPickFiles"] + [id$="holder"]的组合，精准定位所有符合bfPickFiles[数字]holder格式的div。
• 若页面中不存在数字超出3281-3745的目标div，可直接省略过滤部分的代码，仅保留基础样式即可。

内容的提问来源于stack exchange，提问作者Maxime K.