Переопределение таблиц стилей

Question

У меня есть ссылка, где я хочу изменить цвет текста по сравнению с цветом, который я установил для гиперссылок. Мой код:

<span class="button"><%= link_to "Create new scenario", :action => "create" %></span>

И мой CSS:

a:link { 
  color:rgb(50%, 15%, 5%);
  text-decoration:none; 
} 


.button {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black !important;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

По какой-то причине текст гиперссылки все еще коричневый, rgb (50%, 15%, 5%).

Answer 1

Измените свой CSS, чтобы использовать класс .button и привязки с родительским классом CSS из .button. как показано ниже:

.button,.button a:link {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black !important;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

РЕДАКТИРОВАТЬ: Имейте в виду, что это приводит к повторению границы и заставляет гиперссылку отображаться без подчеркивания из-за текстового оформления: нет. В этом случае рекомендуется использовать отдельные объявления CSS.

.button {....}
.button a:link {.....}

Answer 2

Я думаю, что это из-за специфики; span (.button) менее специфичен для ссылки, чем a:link, поэтому применяются стили a:link (правильно в соответствии со спецификацией: http://www.w3.org/TR/CSS2/cascade.html).

Если вы хотите переопределить стили a:link для этой одной кнопки (или ... ну, любым другим способом аналогичным образом), добавьте класс к тегу <a>, а не к его родительскому элементу.

Хотя вы можете сойти с рук:

.button > a:link {/* styles */}

Что должно стать конкретным, поскольку этот <a> является потомком диапазона класса .button.

Edit:

Стоит отметить, что селектор '>' применяется только к непосредственным потомкам, поэтому это повлияет на a внутри элемента класса .button, однако a внутри div в свою очередь внутри элемент класса .button не будет затронут.

Также этот селектор не поддерживается IE (конечно, ниже версии 7, и я не знаю о версии 7 - или, действительно, версии 8). Вместо этого можно использовать оператор '*':

.button * a:link {/* styles */}

с учетом того, что хотя это поддерживается, я думаю, в IE, по крайней мере, после версии 5.x, оно немного шире, так как оно нацелено на все a внутри элемента класса .button, независимо от любые промежуточные элементы, и все равно, вероятно, будет менее конкретным, чем любое правило, применяемое к a:link s.

Answer 3

Вы можете сделать стиль CSS. Кнопка a: ссылка {цвет: черный;}

Answer 4

"! important" не для форсирования детского стиля. Пользователь может переопределить стили, назначенные автором веб-страницы. Это не имеет смысла в вашем случае.

Правильный способ сделать это:

.button {
  -moz-border-radius-bottomleft:6px;
  -moz-border-radius-bottomright:6px;
  -moz-border-radius-topleft:6px;
  -moz-border-radius-topright:6px;
  background-color:rgb(93%, 93%, 93%);
  border:1px solid black;
  color:black;
  line-height:1.9;
  margin:0 3px 3px 0;
  padding:4px 8px 4px 3px;
  text-decoration:none;
}

.button a {
  color:black;
}

Примечания:

1. ".button > a" хорошая идея, но она не будет работать в IE6. Поэтому для безопасности следует использовать «.button a».
2. Соединение ".button" и ".button a" в одном наборе стилей приведет к повторению границы кнопки.