Text Decoration not working within DIV

问题

I have the following 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;
                }

And this is my 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>

I've searched Stack Overflow for solutions to this problem:

Tried swapping the syntax around a little e.g. .class-name a:link {text-decoration: none;}
Tried declaring a global a {text-decoration: none;}, this works but it feels like a workaround, not a real solution

回答1:

In your HTML, top-category-item-copy is a div, with an a as the parent. Your CSS is saying "No text decorations for all a tags within .top-category-item-copy."

回答2:

I usually do this oldschool move when i want the behavior of links to be different from the text is uses

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

hope this helps

回答3:

For the benefit of those who might still encounter this problem, i had this same issue where the a tag was parent to my custom div tag. I didnt want the whole anchor tags in my website to be altered so i had to use the parent div class for the block of anchor tags where i was altering. The arrangement would look something like this when viewed in 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">

So my solution in the css was to use the parent div class, something like this:

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

instead of

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

This will alter the text-decoration of all anchor tags in this block, rather than try to use the anchor tags of the single anchor tags which is overridden by the "whatever" class. Hope this helps someone.

来源：https://stackoverflow.com/questions/9469922/text-decoration-not-working-within-div

标签

css

html

hyperlink

text-decorations