Question

我正在使用适用于Firefox的时尚插件，并更改各种页面的CSS以适合我的需要和需求，但是我还是遇到了一个不确定的问题，我不确定该问题是否可以解决-所以我在这里，没有什么似乎无法解决的：）

此足球经理网站显示了仍在杯中以不同图像进行比赛的球队。但是，有5个不同的杯子，因此它们会重复使用其中一张图像。

<img src="/Img/Icons/cupA.jpeg" alt="Spelar i Sverigecupen" title="Spelar i Sverigecupen" class="">

<img src="/Img/Icons/cupB.jpeg" alt="Spelar i Safircupen" title="Spelar i Safircupen" class="">
<img src="/Img/Icons/cupB.jpeg" alt="Spelar i Rubincupen" title="Spelar i Rubincupen" class="">
<img src="/Img/Icons/cupB.jpeg" alt="Spelar i Smaragdcupen" title="Spelar i Smaragdcupen" class="">

<img src="/Img/Icons/cupC.jpeg" alt="Spelar i Tröstcupen" title="Spelar i Tröstcupen" class="">

CSS是否可以编辑这些图像以显示五个不同的图像？

我有5张不同的照片供他们选择。（cupA，cupB1，cupB2，cupB3，cupC [.png]）

cupA和cupC没问题，但是中间的三个（cupB.jpeg）仅具有不同的alt和标题文本（甚至看不到一个类）。这些（alt / title）可以与CSS一起使用，以分离这三个杯子图像吗？

我正在使用什么（显然是X = A，B或C）：

img[src$='/Img/Icons/cupX.jpeg']{
    padding-top: 13px !important;
    margin-top: 0px !important;
    margin-left: 4px !important;
    width: 13px !important;
    background-repeat: no-repeat !important;
    height: 0px !important;
    background-image: url('http://mypage.com/cups/cupA.png') !important;
    }

/ M

Answer 1

您可以在CSS选择器中使用不同的属性来定位它们

img[alt="Spelar i Safircupen"] {
    border: 10px solid pink
}
img[alt="Spelar i Rubincupen"] {
    border: 10px solid green
}

使用alt和/或标题更改CSS

1 个答案: