CSS - 转换函数不能在链接上工作？

Question

当href的扩展名为.pdf时，我确实喜欢这样做。 .DOC; .PPT; .xls然后它会在它前面添加相应的文件图片。然后当我将鼠标悬停在它上面时，我尝试将链接变小，但我没有做任何事情！我做错了什么或什么？

代码：

＆＃13;

＆＃13;

ul{
  list-style-type: none;
}
ul a{
  text-decoration:none;
  padding-left: 20px;
  background-repeat: no-repeat;
}
ul a:hover{
  text-decoration:underline;
  color:#666;
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
a[href$=".pdf"]{
  background-image:url(http://i.stack.imgur.com/zJlYq.gif);
}
a[href$=".doc"]{
  background-image:url(http://i.stack.imgur.com/z2lbW.gif);
}
a[href$=".ppt"]{
  background-image:url(http://i.stack.imgur.com/Tk5Vv.gif);
}
a[href$=".xls"]{
  background-image:url(http://i.stack.imgur.com/sOr7E.gif);
}

＆＃13;

<ul>
  <li><a href="/one.pdf">pdf</a></li>
  <li><a href="/two.doc">doc</a></li>
  <li><a href="/three.ppt">ppt</a></li>
  <li><a href="/four.xls">xls</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您应该将display: inline-block用于<a>代码（或display: block），因为<a>默认情况下为display: inline，但transformable element可以'与display: inline：

  

Transformable element - 一个元素，其布局由CSS框模型控制，该模型是块级或原子内联级元素，或者......

     

Inline-block - 此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

ul {
    list-style-type: none;
}

ul a {
    text-decoration: none;
    padding-left: 20px;
    background-repeat: no-repeat;
    display: inline-block;
}

ul a:hover {
    text-decoration: underline;
    color: #666;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
}

a[href $= '.pdf'] {
    background-image: url(http://i.stack.imgur.com/zJlYq.gif);
}

a[href $= '.doc'] {
    background-image: url(http://i.stack.imgur.com/z2lbW.gif);
}

a[href $= '.ppt'] {
    background-image: url(http://i.stack.imgur.com/Tk5Vv.gif);
}

a[href $= '.xls'] {
    background-image: url(http://i.stack.imgur.com/sOr7E.gif);
}

<ul>
    <li><a href="/one.pdf">pdf</a></li>
    <li><a href="/two.doc">doc</a></li>
    <li><a href="/three.ppt">ppt</a></li>
    <li><a href="/four.xls">xls</a></li>
</ul>

Answer 2

transform不适用于<a>等内联元素。您可以将链接显示为内联块或块以使转换工作！

  

可变形元素   可转换元素是以下类别之一的元素：

     

  

• 一个元素，其布局由CSS box模型控制，该模型是块级或原子内联级元素，或者其display属性计算为table-row，table-row-group，table-header -group，table-footer-group，table-cell或table-caption [CSS21]

  

• SVG命名空间中的一个元素，不受CSS框模型的控制，该模型具有属性transform，'patternTransform'或gradientTransform [SVG11]。

  

     

http://www.w3.org/TR/css3-transforms/#transformable-element
  http://www.w3.org/TR/css3-transforms/#transform-property

此代码有效：

ul{
  list-style-type: none;
}
ul a{
  display:inline-block;
  text-decoration:none;
  padding-left: 20px;
  background-repeat: no-repeat;
}
ul a:hover{
  display:inline-block;
  text-decoration:underline;
  color:#666;
  -moz-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
a[href$=".pdf"]{
  background-image:url(http://placehold.it/20x20);
}
a[href$=".doc"]{
  background-image:url(http://placehold.it/20x20);
}
a[href$=".ppt"]{
  background-image:url(http://placehold.it/20x20);
}
a[href$=".xls"]{
  background-image:url(http://placehold.it/20x20);
}

<ul>
  <li><a href="/one.pdf">pdf</a></li>
  <li><a href="/two.doc">doc</a></li>
  <li><a href="/three.ppt">ppt</a></li>
  <li><a href="/four.xls">xls</a></li>
</ul>

Answer 3

将display: inline-block放在链接元素上。您似乎无法转换内联元素。此外 - 您的语法应该完全有效，尽管您可能有太多前缀。只有IE9应该需要MS前缀，我怀疑还需要其他任何一个。