Ссылки списка и селекторы CSS

@Beauty69 · Регистрация: 11.12.2012

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

Здравствуйте. Есть вопрос по использованию нескольких селекторов с одним и тем же описанием стиля. У меня есть 4 навигационных меню на одной страничке сайта. 2-а из них находятся в разных местах, но имеют одинаковый стиль и еще 2 имеют разные стили (с ними проблем нет.)

HTML5
1
2
3
4
5
6
7
<ul class="centermenu">
<li><a href="#">Home</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#">Hyperlink</a></li>
<li><a href="#">Hyperlink</a></li>
</ul>

и

HTML5
1
2
3
4
5
6
7
<ul class="leftmenu">
<li><a href="#">HOME</a></li>
<li><a href="#">HYPERLINK</a></li>
<li><a href="#">HYPERLINK</a></li>
<li><a href="#">HYPERLINK</a></li>
<li><a href="#">HYPERLINK</a></li>
</ul>

Эти 2 меню имеют разное оформление, расположение и соответственно разные стили CSS, но они имеют одинаковый стиль для ссылок. Так можно ли как то описать для классов leftmenu и centermenu для тега <a> одинаковые псевдокласы, что бы не пришлось загромождать css файл повторяющимся кодом.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.leftmenu li a:link {
text-decoration:none;
color:#333333;
}
 
.leftmenu li a:visited {
text-decoration:none;
color:#333333;
}
 
.leftmenu li a:hover {
text-decoration:none;
color:#D67914;
}
 
.leftmenu li a:active {
text-decoration:none;
color:#D67914;
}

Это пример только для одного меню, а как добавить сюда еще один класс, что бы не пришлось переписывать один и тот же код для второго класса ???

@aj17 · 21.07.2014, 16:12

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.leftmenu li a:link,
.centermenu li a:link {
text-decoration:none;
color:#333333;
}
 
.leftmenu li a:visited,
.centermenu li a:visited {
text-decoration:none;
color:#333333;
}
 
.leftmenu li a:hover,
.centermenu li a:hover {
text-decoration:none;
color:#D67914;
}
 
.leftmenu li a:active, 
.centermenu li a:active{
text-decoration:none;
color:#D67914;
}

Попробуйте так.

@vovandr · 21.07.2014, 16:12

создайте еще один общий класс и прицепите его к двум меню. В этот и пропишите общие стили для двух меню.

@Beauty69 · 21.07.2014, 16:37 **[ТС]**

Я попробую сейчас и первый вариант. А вот со вторым Я так понял к одному тэгу можно применять одновременно несколько классов ????

HTML5
1
<teg class="class1" class="class2" class="class3"></teg>

@vovandr · 21.07.2014, 16:46

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

Я попробую сейчас и первый вариант. А вот со вторым Я так понял к одному тэгу можно применять одновременно несколько классов ????

Да только через пробел:

HTML5
1
<teg class="class1 class2"></teg>

@Beauty69 · 21.07.2014, 18:03 **[ТС]**

Спасибо, быстрое и хорошее решение.В мануалах данного способа не видел.

@Qwertiy · 21.07.2014, 23:26

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

CSS
1
2
3
4
5
6
7
8
.leftmenu li a:link {
text-decoration:none;
color:#333333;
}
.leftmenu li a:visited {
text-decoration:none;
color:#333333;
}

Ты в курсе, что селекторы можно писать через запятую?

CSS
1
2
3
4
.leftmenu li a:link, .leftmenu li a:visited {
  text-decoration:none;
  color:#333333;
}

@Beauty69 · 22.07.2014, 16:40 **[ТС]**

Спасибо, не знал, сделаю код еще короче. Я был в курсе только для тегов, и для обычного описания:

CSS
1
2
3
h1,p,a {
style;
}

или

CSS
1
2
3
.selector1, .selector2 {
style;
}

А вот как применить это к псевдоклассам,я не знал. Но совет полезный, еще раз спасибо!!!

Новые блоги и статьи Все статьи Все блоги /
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	21.07.2014, 16:12
	создайте еще один общий класс и прицепите его к двум меню. В этот и пропишите общие стили для двух меню. 1

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	21.07.2014, 18:03 [ТС]
	Спасибо, быстрое и хорошее решение.В мануалах данного способа не видел. 0