属性选择器不起作用

Question

我正在尝试 select 基于 alt 属性的 img 标签以在移动设备上加载正确的背景图像

问题不在于属性的组合 select 或者我使用它似乎不起作用，我什至无法 select 我想要的标签

我用过这些

img[alt="Chelo Kebab"] {opacity: 0.5}
img[alt*="Chelo Kebab"] {opacity: 0.5}
img[alt^="Chelo Kebab"] {opacity: 0.5}

我尝试了所有组合，大写，正常

img[alt] {opacity: 0.5}

但没有成功我也试着把父 class 名字放在 img

之前

你可以在这个地址看到我正在处理的代码 here

我正在尝试 select 每个 img 标签

这是我写的一切正确的证明

更新很明显这是一个缓存问题，我正在尝试解决

Answer 1

css 中图像的属性选择器没有问题：

img[alt="abc"] {
  opacity: 0.8 !important;
}
img[alt="def"] {
  opacity: 0.5 !important;
}
img[alt="ghi"] {
  opacity: 0.3 !important;
}
img[alt] {
  opacity: 0.1;
}

<img src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="abc" src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="def" src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="ghi" src="https://dummyimage.com/200x100/000/fff" /><br />

Note that because you have a more general selector in your code (img[alt]) I added the !important to the properties to override the opacity in your general selector.

属性选择器不起作用

Attribute selector doesnt work

css

image

css-selectors

selector