Наследование a:link,a:hover,a:visited,a:active

@mardeeva_m · Регистрация: 02.10.2016

Студворк — интернет-сервис помощи студентам

Ребят,привет)Прохожу практикум по html/css на htmlbook.ru. Столкнулась с заданием,с которым не могу разобраться. Можете объяснить,почему оно выполняется именно так.
Вот так звучит само задание "Используя группирование и наследование оптимизируйте приведённый стиль."

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
a:link {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  font-size: 11px;
  color: #3A681A;
}
a:visited {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #3A681A;
  text-decoration: none;        
}
a:hover {
  text-decoration: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #5CA22E;
}
a:active {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  color: #DC0000;
}
.pole {
  border: 1px solid #008000;
  width: 95px;
  font-size: 11px;
  background-color: #E7F2D7;
  height: 17px;
}
.pole2 {
  border: 1px solid #008000;
  font-size: 11px;
  background-color: #E7F2D7;
  height: 17px;
}

А в ответе на сайте вот так.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
a:link {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #3A681A;
}
a:visited {
  color: #3A681A;
}
a:hover {
  color: #5CA22E;
}
a:active {
  color: #DC0000;
}
.pole, .pole2, a:link {
  font-size: 11px;
}
.pole, .pole2 {
  border: 1px solid #008000;
  height: 17px;
  background-color: #E7F2D7;
} 
.pole {
  width: 95px;
}

А я бы сделала вот так:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
a{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
}
 
a:link, a:visited, a:hover{
  text-decoration: none;
}
 
a:link {
  color: #3A681A;
}
a:visited {
  color: #3A681A;
 
}
a:hover {
  color: #5CA22E;
}
a:active {
  color: #DC0000;
}
 
.pole,.pole2{
  border: 1px solid #008000;
  font-size: 11px;
  background-color: #E7F2D7;
  height: 17px;
}
 
.pole {
  width: 95px;
}

Объясните пожалуйста,как работает механизм наследования в элементах a:visited,a:link,a:active,a:hover?

@Omion · 15.12.2016, 15:30

Погодь, тут нет наследования. Это оптимизация кода. Элементы собраны по общему признаку. Рекомендую почитать про псевдоклассы(крути до псевдоклассов), тело пахнет недостатком информации. Чтоб не оставить тебе вопрос не отвеченным и твой интерес не удовлетворённым отвечаю. псевдокласс link сообщает состояние ссылки до клика по ней, visited после клика, а hover это состояние элемента по наведению. Вывод: все общие свойства тега А, можно подогнать под псевдокласс link.

Добавлено через 4 минуты
Наследование

@mardeeva_m · 15.12.2016, 16:30 **[ТС]**

Спасибо,поняла

@Fedor92 · 15.12.2016, 17:17

Omion, mardeeva_m, пока не видно разметки, есть только стили нельзя утвердительно сказать есть наследование или нет! Обоим на заметку... А теперь вопрос на засыпку: если я задам такие стили:

CSS
1
2
a:hover{font-family: Verdana, Arial, Helvetica, sans-serif; color:red}
a:link{color:blue}

и

CSS
1
2
a:link{font-family: Verdana, Arial, Helvetica, sans-serif; color:red}
a:hover{color:blue}

Собственно найдите 10 отличий и сделайте правильные выводы...

@mardeeva_m · 16.12.2016, 11:16 **[ТС]**

Ну я так понимаю,что в первом случае ссылка синего цвета,а при наведении на нее курсора мыши меняется шрифт(возможно!).Во втором случае ссылка имеет шрифт Verdana и т.д.,а при наведении на нее возможно меняется цвет ссылки. Так?

@Fedor92 · 16.12.2016, 11:29

Сообщение от mardeeva_m

Так?

Суть уловили правильно, выводы пока не очень...

Во втором случае стили заданные для a:link(а именно шрифт), актуальны и для hover, но стили заданные для hover не актуальны для a:link... Это к вопросу о наследовании... Желательно было бы увидеть разметку конечно... Наследованием принято считать передачу каких-то свойств от родительского элемента дочернему, но по моему мнению смысл наследования выходит за пределы понятий "родительский" и "дочерний" элемент... По специфичности псевдоклассы между собой равны...

Так что это специфичность или наследование?

@mardeeva_m · 16.12.2016, 11:58 **[ТС]**

Вы меня что-то запутали. То,что применимо к a:link,то и применимо для a:hover,но не наоборот.Это понятно. А вот ответить на вопрос "специфичность или наследование" я не могу.
Разметки нет,есть только css. Вот ссылка на задание http://htmlbook.ru/practical/optimizaciya-css.

@Fedor92 · 16.12.2016, 12:11

Сообщение от mardeeva_m

Вы меня что-то запутали.

Почему же запутал?

Вы же видите решение...

Не задавались вопросом почему шрифт указан только для a:link и некоторый другие стили? Если наследования нет, как Вам тут утвердительно заявили...

Сообщение от mardeeva_m

Разметки нет,есть только css.

Значит - это некорректно поставленное задание... Непонятно к каким элементам относятся классы, может это классы родительских элементов, а может и классы ссылок...

@mardeeva_m · 16.12.2016, 12:13 **[ТС]**

Поняла,спасибо.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Omion 190 / 55 / 12 Регистрация: 19.05.2015 Сообщений: 352
	15.12.2016, 15:30
	Сообщение было отмечено mardeeva_m как решение Решение Погодь, тут нет наследования. Это оптимизация кода. Элементы собраны по общему признаку. Рекомендую почитать про псевдоклассы(крути до псевдоклассов), тело пахнет недостатком информации. Чтоб не оставить тебе вопрос не отвеченным и твой интерес не удовлетворённым отвечаю. псевдокласс link сообщает состояние ссылки до клика по ней, visited после клика, а hover это состояние элемента по наведению. Вывод: все общие свойства тега А, можно подогнать под псевдокласс link. Добавлено через 4 минуты Наследование 1

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	15.12.2016, 16:30 [ТС]
	Спасибо,поняла 0

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	16.12.2016, 11:16 [ТС]
	Ну я так понимаю,что в первом случае ссылка синего цвета,а при наведении на нее курсора мыши меняется шрифт(возможно!).Во втором случае ссылка имеет шрифт Verdana и т.д.,а при наведении на нее возможно меняется цвет ссылки. Так? 0

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	16.12.2016, 11:58 [ТС]
	Вы меня что-то запутали. То,что применимо к a:link,то и применимо для a:hover,но не наоборот.Это понятно. А вот ответить на вопрос "специфичность или наследование" я не могу. Разметки нет,есть только css. Вот ссылка на задание http://htmlbook.ru/practical/optimizaciya-css. 0

@mardeeva_m 7 / 7 / 2 Регистрация: 02.10.2016 Сообщений: 155
	16.12.2016, 12:13 [ТС]
	Поняла,спасибо. 0

Наследование a:link,a:hover,a:visited,a:active

Решение