通配符覆蓋所有其他設置

我是新來的CSS。這些教程告訴我，css文件上半部分定義的設置會被下面定義的設置覆蓋。現在我嘗試爲整個頁面創建一個自定義光標，在點擊鏈接時這是一個動畫。我的代碼如下所示：通配符覆蓋所有其他設置

* { 
    cursor: url("../dartpfeil.cur"), auto; 
} 

... 

.menu a:active { 
    cursor: url("../dartpfeil_steckt.cur"), auto; 
}

但這不起作用。在*部分定義的遊標起作用，但如果我點擊菜單鏈接，光標不會改變。如果我刪除*部分，並添加以下代碼：

.menu a:hover { 
    cursor: url("../dartpfeil.cur"), auto; 
}

它的工作原理，但「dartpfeil.cur」光標僅徘徊的鏈接顯示。我也試過

*:hover { 
    cursor: url("../dartpfeil.cur"), auto; 
}

但是隨後光標也只能通過懸停鏈接來顯示。我想在整個頁面上使用「dartpfeil.cur」，就好像它是在*中定義的那樣，但我也想在鏈接處於活動狀態時使用「dartpfeil_steckt.cur」。有沒有解決這個問題的方法？

感謝和所有的新年快樂！

編輯：錯誤代碼固定
EDIT2：作爲問，下面的HTML代碼：

<html> 
    <head> 
     <title>Dartverein XY</title>   

     <link rel="stylesheet" href="style.css" /> 
    </head> 
    <body> 
     <a href="index.php" id="headerLink"> 
      <section id="header"> 
       <div id="title">Steeldartverein<br>M&uuml;hldorf e.V.</div>  
      </section> 
     </a> 

     <div class="horizontalBorder"></div> 

     <section class="menu"> 
      <p class="verticalBorder"></p> 
      <a href=""><div class="menuElementRed">News</div></a> 
      <p class="verticalBorder"></p> 
      <a href=""><div class="menuElementGreen">&Uuml;ber uns</div></a> 
      <p class="verticalBorder"></p> 
      <a href=""><div class="menuElementRed">Weiteres</div></a> 
      <p class="verticalBorder"></p> 
      <a href=""><div class="menuElementGreen">Login</div></a> 
      <p class="verticalBorder"></p> 
      <p class="lastVerticalBorder"></p> 
     </section> 

     <div class="horizontalBorder"></div> 


    </body> 
</html>

來源

2017-01-01 Christian

向我們展示你使用這個 – LGSon

同樣的標記，你這是什麼活動鏈接是什麼意思？ – LGSon

@LGSon鏈接處於活動狀態（通過css selector「active」捕獲），如果光標在鏈接上並按下鼠標左鍵。我將HTML代碼添加到問題中。 – Christian

是否「dartpfeil_steckt.cur」工作*？你的代碼看起來很好，它應該覆蓋通配符，因爲它更具體。我最好的猜測是你錯位了文件，或拼寫錯了文件名。

來源

2017-01-01 21:02:44 KAS

不幸的是。如果我通過「.menu a：hover」替換*，它會起作用，但是（邏輯上）「dartpfeil.cur」僅通過懸停鏈接顯示。 – Christian

爲什麼它不工作，是因爲它是你div這是活躍元素併爲div向:active類迴應它需要tabindex。

我加入tabindex（和一個額外的CSS規則），以/爲新聞鏈接div所以你看怎麼樣的工作，我也關於我們鏈接刪除div，現在是一個工作過

* { 
 
    cursor: url("../dartpfeil.cur"), auto; 
 
    color: lime; 
 
} 
 
.menu a:active { 
 
    cursor: url("../dartpfeil_steckt.cur"), auto; 
 
    color: red; 
 
} 
 
.menu a div:active { 
 
    cursor: url("../dartpfeil_steckt.cur"), auto; 
 
    color: red; 
 
}

<html> 
 
    <head> 
 
     <title>Dartverein XY</title>   
 

 
     <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 
    <body> 
 
     <a href="index.php" id="headerLink"> 
 
      <section id="header"> 
 
       <div id="title">Steeldartverein<br>M&uuml;hldorf e.V.</div>  
 
      </section> 
 
     </a> 
 

 
     <div class="horizontalBorder"></div> 
 

 
     <section class="menu"> 
 
      <p class="verticalBorder"></p> 
 
      <a href=""><div tabindex="0" class="menuElementRed">News</div></a> 
 
      <p class="verticalBorder"></p> 
 
      <a href="">&Uuml;ber uns</a> 
 
      <p class="verticalBorder"></p> 
 
      <a href=""><div class="menuElementRed">Weiteres</div></a> 
 
      <p class="verticalBorder"></p> 
 
      <a href=""><div class="menuElementGreen">Login</div></a> 
 
      <p class="verticalBorder"></p> 
 
      <p class="lastVerticalBorder"></p> 
 
     </section> 
 

 
     <div class="horizontalBorder"></div> 
 

 

 
    </body> 
 
</html>

來源

2017-01-02 07:53:17 LGSon

通配符覆蓋所有其他設置

回答

相關問題