文本修飾不DIV

中工作，我有以下的CSS：文本修飾不DIV

.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;}，這工作，但感覺就像一個解決辦法，而不是一個真正的解決方案

來源

2012-02-27 Olly F

您的CSS鏈接「在類」下方，但您的HTML是相反的方式。這是行不通的。你可以添加一個類到「a」本身，並把你的文字修飾。 – reedlauber 2012-02-27 18:12:06

太棒了，這個工程。但是...我仍然覺得我不明白爲什麼我的代碼不起作用。你能多解釋一下嗎？ – 2012-02-27 18:17:17

如果不希望規則適用於頁面上的所有鏈接，請將'.top-category-item-copy-a複製一個{...'爲'a {...'或引用父元素。 – j08691 2012-02-27 18:21:48

在HTML，top-category-item-copy是一個div，以a作爲父母。你的CSS說「.top-category-item-copy內的所有a標籤沒有文字裝飾。」

來源

2012-02-27 18:12:37

哦！人。我知道了。因此，解決這個問題的解決方案可能是在頂級類別項目內創建一個DIV，然後這個內部DIV會在其周圍有一個'a'標籤。我將'text-decoration：none;'移到'top-category-item'。 – 2012-02-27 18:20:54

這將工作。如果你想保持你的HTML原樣，你可以改變你的CSS聲明爲'div.top-category-item-copy'。那就是說：「一個'''標籤，包含一個'div'，它有一個'top-category-item-copy'類。 – 2012-02-27 18:24:55

另外，我知道你說過它」感覺像是一種解決方法「，但肯定沒有錯並說'一個{text-decoration：none;}'特別是如果你的所有鏈接（或者至少大部分）都沒有下劃線。 – 2012-02-27 18:26:14

當我要鏈接的行爲是從不同的我通常做這個老校友招文本使用

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

希望這有助於

來源

2012-02-27 18:11:46 legrandviking

恐怕這不起作用。 – 2012-02-27 18:15:45

爲了那些仍然可能遇到此問題的人的利益，我也遇到了同樣的問題，其中a標記是我的自定義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; 
    }

這將改變此塊中所有錨標記的文本修飾，而不是嘗試使用被「whatever」類覆蓋的單個錨標記的錨標記。希望這可以幫助某人。

來源

2014-01-24 09:13:46

文本修飾不DIV

回答

相關問題