Jak zastosować styl CSS tylko do obrazów PNG?Wybierz wszystkie obrazy PNG
.pngImages {opacity:0.75}
.pngImages:hover {opacity:1}
Mam wiele stron, które zawierają powtarzające PNG plików. Jak można było zastosować tę klasę do wszystkich z nich bez określić img class="pngImage" ...
coś takiego, ale tylko dla PNG:
div {background-color:#ddd}
Można użyć selektora atrybutu
img[src$=".png"]
Powoduje to zaznaczenie wszystkich obrazów PNG:
Odnośnik: http://www.w3.org/TR/css3-selectors/ Zobacz: 'E [foo $ =" bar "]' –
Jedynym możliwym problemem byłoby coś w rodzaju '
' jeśli masz trochę routing do dynamicznych danych wyjściowych lub używasz ciągu zapytań do pomijania pamięci podręcznej, lub jeśli masz mieszany przypadek typu 'PNG' lub' Png' (prawdopodobnie istnieją bardziej prawdopodobne wyjątki). Mówiąc prościej, wybiera wszystkie obrazy, których 'src' kończy się dokładnie' .png'. –
Zakładając, że należy zadbać o znaczniki <img>, a nie o obrazy tła:
img[src$='.png'] {
background-color: #ddd;
}
To w zasadzie wybiera tagów graficznych, które mają wartość atrybutu src kończącą się .png
Można użyć selektora [attribute$='value'] to zrobić:
img[src$=".png"] { opacity:0.75; }
img[src$=".png"]:hover { opacity:1; }
myślę, że powinieneś być w stanie zrób to za pomocą selektora atrybutu: 1 na przykład:
img[src$=".png"]{border:2px solid #8c0000;}
Może zajść potrzeba przetestowania tego w programie Internet Explorer, aby upewnić się, że został pobrany.
Wszystkie twoje obrazy to png lub niektóre z nich to gif, jpg itp.? – Nitesh
Czy istnieje powód, dla którego nie chcesz dodawać atrybutu klasy? – Gevious
Dobre pytanie kreatywne +1. Ale nie sądzę, żeby istniało specjalne rozwiązanie CSS. - @ user2586454 – Nitesh