Украшение текста не работает в DIV - PullRequest
Новая
       30

Украшение текста не работает в DIV

2 голосов
/ 27 февраля 2012

У меня есть следующий CSS: 

.top-category-item  {
        height: 338px;
        background-color: black;
        position: relative;
        }

.top-category-item-copy {
        width: 100%;
        /* Fallback for web browsers that doesn't support RGBa */
        background: rgb(0, 0, 0);
        /*  RGBa with 0.8 opacity */
        background: rgba(0, 0, 0, 0.8);
        bottom: 0px;
        position: absolute;
        padding-left: 5px;
        padding-right: 15px;
        padding-top: 2px;
        padding-bottom: 4px;
        box-sizing:border-box;
        -moz-box-sizing:border-box; /* Firefox */
        -webkit-box-sizing:border-box; /* Safari */
        font-family: Georgia, Times New Roman, serif;
        font-size: 35px;
        line-height: 36px;
        font-weight: bold;
        color: #F1F1F1;
        }

.top-category-item-copy a       {
                text-decoration: none;
                }

И это мой HTML: 

    <a href="">
    <div class="top-category-item low-gutter">
    <img src="images/feature-placeholder.jpg" alt="latest-image-placeholder"/ width=100% height=100%>
    <div class="top-category-item-copy">Earlier French Quarter curfew for youths gets mixed reaction.</div>
    </div>
    </a>

Я искал переполнение стека для решения этой проблемы:

  • Попробовал немного поменять синтаксис, например .class-name a:link {text-decoration: none;}

  • Попытался объявить глобальный a {text-decoration: none;}, это работает, но это похоже на обходной путь, а не реальныйрешение

Ответы [ 3 ]

2 голосов
/ 27 февраля 2012

В вашем HTML top-category-item-copy - это div с a в качестве родителя. Ваш CSS говорит: «Нет текстовых декораций для всех a тегов в .top-category-item-copy.»

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

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

    <div class="parent-div-class-for-this-block-containing-anchor-tags" "bla" "bla" "bla">

    <maybe-other-div-classes-and-ids>

    <a href="my-anchor-tag-which-i-want-to-alter" class="whatever">

    <div class="my-custom-div-class-which-refuses-to-alter-this-ahref-tag-above">

Так что мое решение в css было использовать родительский класс div, что-то вроде этого: 

    .parent-div-class-for-this-block-containing-anchor-tags a {
            text decoration: none;
    }

вместо

    .my-custom-div-class-which-refuses-to-alter-this-ahref-tag-above a {
            text-decoration: none;
     }

Это изменит оформление текста всех тегов привязки в этом блоке, вместо того, чтобы пытаться использовать теги привязки одиночных тегов привязки, которые переопределяются классом «what».Надеюсь, это кому-нибудь поможет.

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

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

.top-category-item-copy:link { text-decoration: none; }

надеюсь, это поможет

...