У меня проблема с цветом текста CSS

#css

Вопрос:

Верно, итак, я указал, что ссылки по умолчанию должны быть определенного цвета (color: # 696), я хотел, чтобы это изменило цвет всех неопределенных ссылок на этот цвет, но проблема в том, что у меня есть панель меню, и в этой строке меню у меня есть элементы с классом navbtn, эти navbtns имеют цвет # 90F, но, несмотря на то, что я указал цвет этого класса, цвет ссылки в теле по-прежнему остается родительским,

Я хочу, чтобы navbtn имел цвет текста #90F, а не # 696, который я указал. Мой CSS:

 a:link {
    color: #696;
    font-weight: bold;
}

a:visited {
    color: #0C3;
}

--

.navbtn {
    display: block;
    width: 198px;
    height: 35px;
    float:left;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    background-image: url(../global-images/navbtnbg.png);
    color: #09F;
    text-decoration: none;
    font-weight: bold;
}

1. И как бы выглядел html?

2. HTML довольно простой, это просто .navbtn, указанный в теге привязки, который находится внутри контейнера div.

3. Итак, не могли бы вы добавить это к вопросу? Фактический html, а не краткое содержание?

Ответ №1:

Я бы посоветовал вам сделать свой селектор более конкретным:

 a:link.navbtn {
    /* styles for the .navbtn class */
}

Вероятно, также стоит добавить стили для :visited , :hover :active и :focus стилей также.

 a:visited.navbtn {
    /* styles for visited-.navbtn class links */
}

Стоит отметить, что ваш фактический html также может иметь эффект, но я не могу прокомментировать это, не видя его.

Ответ №2:

 .navbtn {
    display: block;
    width: 198px;
    height: 35px;
    float:left;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    text-align: center;
    line-height: 35px;
    font-size: 18px;
    background-image: url(../global-images/navbtnbg.png);
    color: #09F !important;
    text-decoration: none;
    font-weight: bold;
}

добавить!важно …

1. Потрясающе, огромное спасибо, чувак, что указывает «!важно»?

2. он получает привилегии по сравнению с другими спецификациями этого элемента, независимо от того, идут ли они первыми в файле css или нет — пожалуйста, примите ответ, если это помогло

3. Да, вы исправили мою проблему :), я приму ответ, когда закончится мой таймер.

Ответ №3:

Правило для a более конкретное, чем правило для .navbtn, поэтому оно будет иметь приоритет над правилом .navbtn. Если вы создадите новое правило стиля, такое как .navbtn a:link, .navbtn a: hover и так далее, То это должно дать вам желаемые результаты.

Ответ №4:

попробуйте это:

 .navbtn {
    display: block;    
    width: 198px;    
    height: 35px;    
    float:left;    
    border-left: 1px solid #CCC;    
    border-right: 1px solid #CCC;    
    text-align: center;
    line-height: 35px;    
    font-size: 18px;    
    background-image: url(../global-images/navbtnbg.png);        
    text-decoration: none;    
    font-weight: bold;
}
a:link {    
    color: #696;    
    font-weight: bold;}
    a:visited {color: #0C3;}
.navbtn a{
    color: #09F!important;
}