テキストの装飾は、DIV

Question

内で作業していないI以下の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;}を宣言し、これは動作しますが、それは回避策ではなく、真の解決策のように感じてみました

Answer 1

を助け

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

希望を使用していますdiv、aを親として有する。あなたのCSSは、 "aのすべてのタグのテキストなし装飾は.top-category-item-copyです"と言っています。

Answer 2

私が異なるように、リンクの振る舞いをしたいとき、私は通常、このオールドスクール移動を行いますテキストはtop-category-item-copyがあり、これはあなたのHTMLで

Answer 3

この問題に遭遇する可能性がある人のために、私はこのタグが自分のカスタムdivタグの親であったのと同じ問題がありました。私は私のウェブサイトのアンカータグを変更したいので、私が変更していたアンカータグのブロックに親divクラスを使用しなければならなかった。 HTMLで見たときの配置は次のようになります。

.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; 
    } 

：

<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クラスを使用していました

これは、 "whatever"クラスによって上書きされる単一のアンカータグのアンカータグを使用するのではなく、このブロック内のすべてのアンカータグのテキスト装飾を変更します。これが誰かを助けることを望みます。