多个 ID 的相同属性 (CSS)

Question

我需要在我的页面上创建一个新的 CSS 按钮而不是一个简单的图像按钮。

第一步是隐藏.img id。 img id 是“img#bfPickFiles”，它按数字递增，例如：“img#bfPickFiles1932”、“img#bfPickFiles1933”等...

之后我有一个按钮的 div id，编码如下：“#bfPickFilesholder”。但是在中间添加了一个增量，如“#bfPickFiles3732holder”、“#bfPickFiles3733holder”等……（从 3281 到 3745）。

我做了什么：

添加以下代码以隐藏 img 按钮：

.img#bfPickFiles { display: none !important; }

但是没有结果

我已尝试使用以下技术在一个 div id 的一个属性中获取多个 Id：

Css Selectors：选择中间随机部分的id或class

CSS选择器（id包含部分文本）

没有人在工作。

期待以下按钮代码工作（也请看截图）：

[第一张图片][1]https://yourimageshare.com/ib/QuydRDfgBN

[第二张图][1]https://yourimageshare.com/ib/yKYRwOOqqR

[第三张图][1]https://yourimageshare.com/ib/wl5oCK4aW4

[第四张图][1]https://yourimageshare.com/ib/iTViM0Uci3

.img#bfPickFiles {
    display: none !important;
}

#bfPickFiles3282holder {
    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);
}

#bfPickFiles3282holder:hover {
    background-image: linear-gradient(to top, #7c7c7c, #858585, #8e8e8e, #989898, #a1a1a1) !important;
}

#bfPickFiles3282holder::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;
}

#bfPickFiles3282holder::after {
    content: "CHARGER UN DOCUMENT";
    font-size: 0.75em;
    padding-left: 3px;
    color: #fff;
}

“.img .bfPickFiles”应该隐藏图像的地方。

而“.bfPickFiles3282holder”需要包含多个ID（从3281到3745）

提前致谢。 最大

Answer 1

您可能希望使用 CSS 属性选择器 通过它们的部分类名 来定位您的元素，如下所示：

[id^=bfPickFiles]