Проблемы со стилем h3 и якорного тега - PullRequest
Новая
       0

Проблемы со стилем h3 и якорного тега

4 голосов
/ 21 апреля 2011

У меня есть следующий HTML-фрагмент, который корректно работает на моей странице: 

<a href="url goes here" onclick="return ! window.open(this.href);"><h3>title goes here</h3></a>

с использованием следующего CSS 

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

Однако это недопустимый xhtml, поскольку тег <h3> не должен находиться внутри тега <a>.

Когда я перемещаю теги <h3> за пределы тегов <a>, кажется, что css не работает, т. Е. По какой-то причине теряет свой стиль.

Например: 

<h3><a href="url goes here" onclick="return ! window.open(this.href);">title goes here</a></h3>

с: 

h3
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

работает не так, как с тегом <h3> в тегах <a>.

Как это можно исправить?

Ответы [ 4 ]

5 голосов
/ 21 апреля 2011

Вы должны применить стиль к тегу <a>

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

h3 a
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}
3 голосов
/ 21 апреля 2011

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

h3, h3 a /** Applies to both H3 and LINK inside H3 **/
{
    font-family:verdana, arial, helvetica, sans-serif; 
    font-size:75%; 
    font-weight:bold; 
    font-style:normal; 
    text-decoration:none; 
    text-transform:none; 
    margin:0px; 
    padding:0px;
    color:#2C6598;
}

Это должно решить проблему.

0 голосов
/ 11 января 2014

Я знаю, что этот пост старый, но я столкнулся с этой проблемой.Возможно, вам придется обслуживать любые псевдо-классы, которые могут переопределять ваши стили, например: посещаемый и т. Д. Так что вам также необходимо сделать следующее: 

h3 a, a:visited 
{
   font-family:verdana, arial, helvetica, sans-serif; 
   font-size:75%; 
   font-weight:bold; 
   font-style:normal; 
   text-decoration:none; 
   text-transform:none; 
   margin:0px; 
   padding:0px;
   color:#2C6598;
}
0 голосов
/ 16 октября 2012

У меня была та же проблема, поэтому я просто создал новый класс со свойствами, которые я хотел получить в конечном тексте, поэтому он выглядит примерно так:

CSS: (без него не работало "!важно ") 

.myclass, .myclass a {
display: block !important;
font-size: 14px !important; 
font-weight: bold !important;
height: 32px !important;}

HTML: 

<a class="myclass" "url goes here">title goes here</a>
...