Неверный тег: ссылка используется (Chrome) - PullRequest
1 голос
/ 20 февраля 2012

Я использую два разных тега a: link / a: visit / a: hover. Но ссылки в .panel принимают a: link / a: посещения от .footer и получают только: hover от .panel справа .

HTML

<div class="panel" id="tab4"><b><a href="#" target="_blank">Title</a> – Name</b>

CSS

.panel a:link, a:visited {
color:#333;
text-decoration:none;}

.panel a:hover {
color:#000;
text-decoration:none;
border-bottom:1px solid #000;}

.footer a:link, a:visited {
color:#fff;
text-decoration:none;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */}

.footer a:hover {
color:#fff;
text-decoration:none;
border-bottom:1px solid #fff;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */}

Ответы [ 2 ]

1 голос
/ 20 февраля 2012

Правила CSS - это список, разделенный запятыми, который анализируется браузером справа налево, сверху вниз.Когда вы делаете следующее:

.panel a:link, a:visited{
    /*things*/
}

.footer a:link, a:visited {
    /*more things*/
}

Браузер говорит:

"Хорошо, шаг первый, для любого anchor, который равен visited, выполните эти правила.Затем для любого anchor link с классом panel выполните те же самые правила. " " Перейдите ко второму шагу, для любого anchor, равного visited, выполните эти вторые правила {переписываяваш первый шаг}, и для всего, что с class из footer, выполните эти вторые правила еще раз. "

Итак, убедитесь, что у вас достаточно специфичности CSS дляправильно нацелиться на то, что вы хотите нацелиться.

0 голосов
/ 20 февраля 2012

Вы объявляете a:visited дважды, и последний перезаписывает значения первого.

.panel a:link, .panel a:visited {
    color:#333;
    text-decoration:none;
}

.footer a:link, .footer a:visited {
    color:#fff;
    text-decoration:none;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}

Это, наверное, то, что вы ищете. Вы можете указать цели, разделенные запятыми, но каждая из них должна быть указана полностью. В противном случае это будет выглядеть так:

.footer a:link {
    <declarations>
}
a:visited {
    <declarations>
}
...