如何使用伪选择器将“主页”按钮更改为仅使用 CSS 的图标？

【问题标题】：How do I use pseudo-selectors to change a "Home" button to an icon using just CSS?如何使用伪选择器将“主页”按钮更改为仅使用 CSS 的图标？
【发布时间】：2013-05-25 02:07:12
【问题描述】：

我正在开发一个基于自定义 CMS 平台构建的网站，该网站的所有者希望我将“主页”导航菜单项替换为主页图标/图像。通常，这很容易，但我无权访问 HTML/PHP 文件，并且 CMS 不允许我向菜单项添加类。我也无法添加Javascript，所以我必须通过CSS来完成。

CMS 生成的 HTML 或多或少看起来像这样：

<header class="header">
  <nav>
    <ul>
      <li><a href="http://www.home.com/">Home</a></li>
      <li class="first"><a href="http://www.home.com/about">About</a>
        <ul>
          <li><a href="http://www.home.com/about/team">Team</a></li>
        </ul>
      </li>
      <li><a href="http://www.home.com/services">Services</a>
        <ul>
          <li><a href="http://www.home.com/services/financial">Financial</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</header>

我想我可以通过这样的方式来完成它：

.header nav > ul > li:first-of-type {
  background: url('home.png') no-repeat center top;
  -webkit-transition: background-position 0.3s ease-in; 
     -moz-transition: background-position 0.3s ease-in; 
       -o-transition: background-position 0.3s ease-in; 
          transition: background-position 0.3s ease-in; 
}

.header nav > ul > li:first-of-type:hover {
  background-position: center bottom;
}

.header nav a[href="http://www.home.com/"] {
  color: transparent !important;
}

但这似乎并不奏效。我的语法在某处是错误的，还是我遗漏了什么？如果你有更好的方法通过直接的 CSS 来做到这一点，我会全力以赴。

您可以通过此JS Fiddle 查看完整代码。

谢谢！

【问题讨论】：

• 你为什么不直接用包围你的img呢？例如
• home.com/"><imgsrc="/path/to/img.jpg"