スタイル<a>タイトル属性に基づく要素

Question

私には、以下はHTMLの構造です。 CSSファイルで

<div class = "tag-cloud"> 
     <ul> 
     <li class = "volume1"><a title= "style separately element1 element2"> heading1</a></li> 
     <li class = "volume2"><a title= "style separately element1 element2"> heading2</a></li> 
     </ul> 
    </div> 

、

 .tag-cloud ul { 
     padding: 0; 
     text-align: center; 
     position: relative; 
    } 

     .tag-cloud li { 
      display: inline-block; 
      padding: 0.02em; 
      margin: 0 0.3em; 
      list-style: none; 
    } 

    .tag-cloud .volume1 { 
      font-size: 0.8em; 
      color: #C3D1DF; 
     } 

     .tag-cloud .volume2 { 
      font-size: 1em; 
      color: #C3D1DF; 
     } 

今私の要件は関係なく、李クラスの「個別要素1要素2スタイル」アンカー要素の内のテキストのために別々のフォントを持つことです。今では、アンカー要素のタグ内のテキストに別のフォントを与えるために以下のコードを試しましたが、liクラスからスタイルを継承しています。

  .tag-cloud ul li a[title]:hover::after{ 
       content: attr(title); 
      font-size:.75em !important; 
      text-decoration: none; 
      display:block; 
      color: #0096D6; 
      position:absolute; 
      width:400px; 
      height:100px; 
      } 

私には分からないことを教えてください。前もって感謝します。

Answer 1

属性セレクタを使用してスタイルを設定します。 http://www.w3schools.com/css/css_attribute_selectors.asp

.tag-cloud ul { 
 
    padding: 0; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.tag-cloud li { 
 
    display: inline-block; 
 
    padding: 0.02em; 
 
    margin: 0 0.3em; 
 
    list-style: none; 
 
} 
 

 
.tag-cloud .volume1 { 
 
    font-size: 0.8em; 
 
    color: #C3D1DF; 
 
} 
 

 
.tag-cloud .volume2 { 
 
    font-size: 1em; 
 
    color: #C3D1DF; 
 
} 
 

 
a[title="style separately element1 element2"] { 
 
    color: red; 
 
    font-size:.75em 
 
}

<div class="tag-cloud"> 
 
    <ul> 
 
    <li class="volume1"><a title="style separately element1 element2"> heading1</a></li> 
 
    <li class="volume2"><a title="style separately element1 element2"> heading2</a></li> 
 
    </ul> 
 
</div>