Question

I have a requirement where , the below is my structure of html.

    <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>

In the css file ,

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

Now my requirement is to have a separate font for the text inside the of the anchor elements "style separately element1 element2" irrespective of the li classes. Right now its inheriting the style from the li class even though I tried the below code to give separate font for the text inside the tag of the anchor element.

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

Please let me know what I'm missing. Thanks in advance.

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>

Answer 2

添加＆＃39;样式＆＃39;每个锚标记内的属性

<a style="font-family:Arial, helvetica" title= "style separately element1 element2"> heading1</a>

样式<a> element based on title attribute

2 个答案: