Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
1

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

21.07.2014, 16:07. Просмотров 418. Ответов 7
Метки нет (Все метки)

Здравствуйте. Есть вопрос по использованию нескольких селекторов с одним и тем же описанием стиля. У меня есть 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;
}
Это пример только для одного меню, а как добавить сюда еще один класс, что бы не пришлось переписывать один и тот же код для второго класса ???
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.07.2014, 16:07
Ответы с готовыми решениями:

Селекторы CSS
Всем привет, такая проблемка. У меня на сайте несколько табличек, и все они имеют один цвет ячеек,...

Селекторы CSS
Очищено.

Селекторы CSS по id
Здравствуйте, в чем разница между a#ref1 и #ref1, получается я могу поставить одинаковые...

Css вложенные селекторы
предположим, в html-коде тег t2 вложен в t1. Возможны ли ситуации, когда стиль заданный так t2 {..}...

CSS селекторы атрибутов для тега BODY
Здравствуйте! Возник такой вопрос: как описать стили тэгу BODY так, чтоб он отображался в IE и в...

7
aj17
284 / 273 / 155
Регистрация: 02.06.2014
Сообщений: 1,020
21.07.2014, 16:12 2
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;
}
Попробуйте так.
1
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
21.07.2014, 16:12 3
создайте еще один общий класс и прицепите его к двум меню. В этот и пропишите общие стили для двух меню.
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
21.07.2014, 16:37  [ТС] 4
Я попробую сейчас и первый вариант. А вот со вторым Я так понял к одному тэгу можно применять одновременно несколько классов ????

HTML5
1
<teg class="class1" class="class2" class="class3"></teg>
0
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
21.07.2014, 16:46 5
Цитата Сообщение от Beauty69 Посмотреть сообщение
Я попробую сейчас и первый вариант. А вот со вторым Я так понял к одному тэгу можно применять одновременно несколько классов ????
Да только через пробел:
HTML5
1
<teg class="class1 class2"></teg>
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
21.07.2014, 18:03  [ТС] 6
Спасибо, быстрое и хорошее решение.В мануалах данного способа не видел.
0
Qwertiy
821 / 629 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
21.07.2014, 23:26 7
Цитата Сообщение от 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;
}
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
22.07.2014, 16:40  [ТС] 8
Спасибо, не знал, сделаю код еще короче. Я был в курсе только для тегов, и для обычного описания:

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

CSS
1
2
3
.selector1, .selector2 {
style;
}
А вот как применить это к псевдоклассам,я не знал. Но совет полезный, еще раз спасибо!!!
0
22.07.2014, 16:40
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.07.2014, 16:40

Селекторы CSS: выбрать все <li> в которых есть ссылка, имеющая атрибут class
Всем привет! Помогите составить селектор. Мне нужно выбрать все &lt;li&gt; в которых есть ссылка, имеющая...

Ссылки в css
Кто нибудь подскажите как сделать в разных блоках разный цвет ссылок, а то что то все ссылки...

css поменять цвет ссылки
&lt;a id=&quot;ru&quot; href=&quot;http://site.com/random/?id=14823&amp;cmp=&amp;lng=ru&amp;tp=5&quot; target=&quot;_blank&quot; &gt;Заходи&lt;/a&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru