JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<!-- у этой ссылки опущен атрибут href, html5 разрешает нам это -->
<a>
    <img src="http://placekitten.com/100/100" alt=""/>
</a>

<a href="#">
    <img src="http://placekitten.com/g/100/100" alt=""/>
</a>

<a href="#">
    <img src="http://placekitten.com/100/100" alt=""/>
</a>

<a href="#">
    <img src="http://placekitten.com/g/100/100" alt=""/>
</a>

CSS

/* Для чистоты эксперимента сбросим дефолтовую окраску у ссылок */
a:active, a:focus, a:visited{
    color:inherit;
}
a:active, a:focus {
    outline: none; 
}

/* === */

a img{border:3px solid #AD1DA5 ;}

/* А вот этот селектор уже перекроет магические дефолтные своства Хрома

a[href] img{border:3px solid #EBACCA;}

*/

/*

т.е. в последнем Хроме не всегда "a img" выберет все те элементы, что и "a[href] img" 

*/

JavaScript

/* 

Попробуйте покликать по котятам - какие-то магические дефолтные стили в последнем 19ом Хроме перекроют наше правило 
"a img{border:3px solid #AD1DA5;}" и окрасят рамки картинок в черный цвет. 

При проверке инспектором в инструментах разработчика все неведомым образом возвращается на круги своя. 

Бага наблюдается ТОЛЬКО в последнем Хроме, в Сафари все ок.

*/