CSS

Question

当 href 的扩展名为 .pdf 时，我确实喜欢这样； .doc; .ppt; .xls 然后它会在它前面添加相应的文件图片。然后，当我将鼠标悬停在 link 上时，我尝试将其变小，但我什么也没做！我是不是做错了什么？

代码：

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

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

你应该使用 display: inline-block 作为 <a> 标签（或 display: block），因为 <a> 默认有 display: inline，但是 transformable element不能与 display: inline:

Transformable element — an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or ...

Inline-block — this value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

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

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

Answer 3

transform不适用于<a>等行内元素。您可以将 link 显示为 inline-block 或块以进行转换！

transformable element A transformable element is an element in one of these categories:

an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]

an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or 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>

CSS - 转换功能不适用于链接？

CSS - Transform function not working on links?

html

css-transforms