Html 如何使用伪选择器来更改“a”；“家”；按钮到一个图标只使用CSS？

我正在一个建立在定制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来实现这一点，我洗耳恭听

你可以用这个来看看完整的代码

---

谢谢

清除类中的问题后，只有2个问题悬而未决。 背景位置应该是左侧而不是中间位置，并且a的选择器不工作。您可以保留用于前面元素的样式，它更清晰：

.header nav > ul > li:first-of-type {
    background: url('http://placekitten.com/20/60') no-repeat left 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: left bottom;
}

.header nav > ul > li:first-of-type a {
    color: transparent;
}

顺便说一句，重要的是没有必要

---

（只需将小猫图片换成另一张更合适的图片）

你为什么不在img周围加上@Edward：“我无法访问HTML/PHP文件…”（这似乎是一个奇怪的限制，可以（重新）开发/更改任何内容，但即使如此）。同意。这是一个奇怪的限制…我不是一个大球迷。这意味着我的CSS是真正的黑客和粗俗。谢谢！看起来你是对的，这会解决的。我发现有一个复合问题，即CMS正在将CSS中的一些特殊字符转换为ISO-8859-1，这将

转换为

>，使其无法在浏览器中工作。但这是一个我必须与CMS制造商合作解决的问题。。。。谢谢你在这方面的帮助！很高兴它帮助了你。我看过你的演示。我希望图像是两个精灵。如果不是这样的话，可能最好再进行一次过渡？但这是另一个故事。。。