Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.94/16: Рейтинг темы: голосов - 16, средняя оценка - 4.94
igrok142
0 / 0 / 0
Регистрация: 13.07.2014
Сообщений: 4
#1

Изменение цвета для отдельного пункта меню

13.07.2014, 20:35. Просмотров 2989. Ответов 7
Метки нет (Все метки)

Добрый день
Создал меню по типу
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <body>
        <header>
            <div class="Top-Menu">
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                    <li><a href="#">7</a></li>
                    <li><a href="#">8</a></li>
                </ul>
            </div>
    </body>
Объявил ему свойства CSS, все работает отменно
Но теперь возник вопрос, как объявить, к примеру, Первому элементу отдельный от остальных цвет
К примеру, у 2,3,4,5..... Будет зеленый цвет, а у 1 - будет красный
Раньше такую штуку провернуть получалось, но исключительно методом тыка
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
13.07.2014, 20:35
Ответы с готовыми решениями:

Как указать значение для отдельного пункта таблицы?
Например, у меня есть такая таблица &lt;ul&gt; &lt;li&gt;Красный&lt;/li&gt;...

Изменение фона текущего пункта меню
Доброго времени суток. Начал писать сайт, изучил пока что только основы...

Изменение пункта меню после прокрутки страницы
Доброго времени суток! Существует меню с пунктами и отдельной ссылкой(справа...

Изменение картинки\содержимого фрейма\видео при выборе пункта меню
Здравствуйте. Подскажите пожалуйста, можно ли, и как, если можно, сделать...

Изменение цвета меню
Добрый день. помогите решить задачу. условие: необходимо при наведении на...

7
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
13.07.2014, 20:48 #2
Присвойте нужным <li> класс и задайте им свойства в css.

HTML5
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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Меню</title>
 
        <style type="text/css">
            .red a{color: red;}
            .green a{color: green;}
            .black a{color: black;}     
        </style>
 
    </head>
    <body>
        <ul>
            <li class="red"><a href="">1</a></li>
            <li class="green"><a href="">2</a></li>
            <li class="green"<a href="">3</a></li>
            <li class="green"><a href="">4</a></li>
            <li class="green"><a href="">5</a></li>
            <li class="green"><a href="">6</a></li>
            <li class="black"><a href="">7</a></li>
            <li class="black"><a href="">8</a></li>
            <li class="black"><a href="">9</a></li>
            <li class="black"><a href="">10</a></li>
        </ul>   
    </body>
</html>
0
igrok142
0 / 0 / 0
Регистрация: 13.07.2014
Сообщений: 4
13.07.2014, 21:07  [ТС] #3
Я начинающий "специалист"
Вопрос
Для всего меню уже объявлен div и class
Теперь, мы для каждого пункта в меню даем еще один class, как правильно прописать это свойство в css
К примеру .Top-Menu red {

}
Или как?
Что то совсем ничего не получается :-(
0
killlfun
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
13.07.2014, 21:10 #4
igrok142,

CSS
1
2
3
.red a{color: red;}
.green a{color: green;}
.black a{color: black;}
0
dimon888951
15 / 15 / 4
Регистрация: 04.10.2012
Сообщений: 181
13.07.2014, 21:12 #5
Лучший ответ Сообщение было отмечено igrok142 как решение

Решение

Да не трогайте те классы , просто так и пропишите к примеру для первого пункта
CSS
1
2
3
.red{
  color:#fff;
}
Не сработает поставьте флаг !important
1
igrok142
0 / 0 / 0
Регистрация: 13.07.2014
Сообщений: 4
13.07.2014, 21:18  [ТС] #6
А вот Вам спасибо за !important, теперь буду знать про это свойство
0
aim777
19 / 19 / 12
Регистрация: 13.07.2014
Сообщений: 102
13.07.2014, 21:22 #7
dimon888951, А как это прописать, не трогая классы?)
Не трогая классы, можно конечно стили прямо внутри тега <a> написать:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li><a style="color:red" href="">1</a></li>
    <li><a style="color:red" href="">2</a></li>
    <li><a style="color:red" href="">3</a></li>
    <li><a style="color:red" href="">4</a></li>
    <li><a style="color:green" href="">5</a></li>
    <li><a style="color:green" href="">6</a></li>
    <li><a style="color:green" href="">7</a></li>
    <li><a style="color:black" href="">8</a></li>
    <li><a style="color:black" href="">9</a></li>
    <li><a style="color:black" href="">10</a></li>
</ul>
Но это плохой вариант)))
0
tasadarMiha
1 / 1 / 0
Регистрация: 12.07.2014
Сообщений: 53
14.07.2014, 13:56 #8
а еще лучше, поучите селекторы. Вот вам небольшой гайдик http://jsfiddle.net/fTVqL/1/ ))
HTML5
1
2
3
4
5
6
7
8
9
<ul>
    
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
    
</ul>
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
ul {
    list-style:none;
}
 
ul li {
    width:100px;
    height:50px;
    float:left;
    background-color: #ccc;
    border-left: 1px solid #333;
    
}
 
ul li:last-child {
    border-right:1px solid #333;
}
 
ul li:first-child {
    background-color:green;
}
 
ul li:nth-child(3) {
    background-color:red;
}
 Комментарий администратора 
Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.
0
14.07.2014, 13:56
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
14.07.2014, 13:56

Изменение цвета меню на сайте Modx
Добрый день. Подскажите, как изменить цвет меню с красного на другой...

Выделение пункта меню при наведении - только текст или весь блок пункта
Всем привет.Есть меню, при наведении появляется hover но он идет строго по...

Рамка для активного пункта меню
&lt;li class =&quot;lis1&quot;&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li class =&quot;lis1&quot;&gt;&lt;a...


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

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

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