Избегание объектов изображения для наследования стилей, предназначенных для форматирования текста - PullRequest
Новая
       16

Избегание объектов изображения для наследования стилей, предназначенных для форматирования текста

0 голосов
/ 14 мая 2018

Это мой первый пост: довольно неловко, я помню, как нашел решение своего собственного вопроса несколько лет назад ... Но давайте начнем.

Я установил целое наведение / ссылку / активный CSS для своих текстовых элементов 

a:hover {
color: #000000;
background-color:#FFFF00;
font-weight: bold;
text-decoration: none;  
}

a:active {
color: #000000;
background-color:#FFFFFF;
font-weight: bold;
text-decoration: none;
}

a:link {
color: #FFFF00;
font-weight: bold;
text-decoration: underline; 
}

a:visited {
color: #000000;
background-color:#FFFFFF;
font-weight: bold;
text-decoration: none;
}

проблема в том, что изображения на странице, со своими ссылками, также наследуют CSS выше. В первый раз, установив значение border=0, я бы решил проблему. Я был неправ. Я просто ищу самый простой способ избежать всех элементов изображений, наследующих CSS, предназначенных для форматирования текстовых ссылок.

EDIT:

Я также попытался добавить следующий CSS: 

.img:active {
background-color: transparent;
}

.img:link {
background-color: transparent;
}

.img:hover {
background-color: transparent;
}

и связывание элементов изображения в исходном коде с 

class="img"

но изображения продолжают наследовать основные стили CSS.

РЕДАКТИРОВАТЬ 2:

@ andrea-ligios Ваше предложение применить класс .img к элементу, содержащему изображения, сработало отлично! Я также реализовал: не селектор. Огромное спасибо. Извините, это мой первый пост, и я забыл, что вставить весь исходный код было бы проще для поиска решения.

1 Ответ

0 голосов
/ 14 мая 2018

Проблема

проблема в том, что изображения на странице, с собственными ссылками , также наследуют CSS выше.

Таким образом, ваш HTML (который вы всегда должны публиковать вместе с вашим CSS, чтобы мы не выполняли ненужную работу по угадыванию) должен выглядеть примерно так: 

<a href="...">
   Some Text
</a>

<a href="...">
   <img src="..." />
</a>

верно?

Затем и связывание элементов изображения в исходном коде с 

class="img"

Итак, вы попробовали

<a href="...">
   <img class="img" src="..." />
</a>

?Если это так, он не может работать, потому что вы присваиваете класс элементу <img>, который не имеет ничего общего с правилами, которые вы хотите переопределить, определенными для элемента <a>.

Решение

Просто примените класс .img к элементу <a>, содержащему изображения: 

<a class="img" href="...">
   <img src="..." />
</a>

Поскольку селекторы class имеют вышеспецифичность чем элемент селекторы , .img правила будут переопределять a правила.

При этом просто не применять правила вместо того, чтобы переопределять их, с помощью :not селектор ?

a:not(.img):hover {
    color: #000000;
    background-color:#FFFF00;
    font-weight: bold;
    text-decoration: none;  
}

a:not(.img):active {
    color: #000000;
    background-color:#FFFFFF;
    font-weight: bold;
    text-decoration: none;
}

a:not(.img):link {
    color: #FFFF00;
    font-weight: bold;
    text-decoration: underline; 
}

a:not(.img):visited {
    color: #000000;
    background-color:#FFFFFF;
    font-weight: bold;
    text-decoration: none;
}
...