如何僅使用CSS使用偽選擇器將“主頁”按鈕更改為圖標？

Question

我正在一個基於自定義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查看完整的代碼。

謝謝！

Answer 1

清除班級的問題后，只有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;
}

順便說一句，重要的沒有必要

演示

（只需將小貓的圖像換成更合適的另一張）