Изменение CSS с помощью alt и / или title - PullRequest
Новая
       45

Изменение CSS с помощью alt и / или title

0 голосов
/ 01 апреля 2019

Я использую стильное дополнение для 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 разных изображений для них. (чашка A, чашка B1, чашка B2, чашка B3, чашка C [.png])

CupA и cupC не проблема, но три посередине (cupB.jpeg) имеют только alt- и title-текст, которые отличаются (даже класс, как вы можете видеть). Могут ли они (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

1 Ответ

0 голосов
/ 01 апреля 2019

Вы можете использовать различные атрибуты в селекторах css для их нацеливания 

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