Question

我熟悉在text-decoration: none和divs中使用spans。然而，它似乎不适用于按钮。我有以下HTML：

<a href="upgrade.php">
    <input type="button" class="Buttons" id="Upgrade" value="Upgrade">
</a>

和CSS：

.Buttons {
    background-color:#D93F87;
    height:50px;
    width:100px;
    border-radius:10px;
    font-size:32px;
    color:#FFFFFF;
    text-align:center;
    text-shadow: -2px 0 #CCC, 0 1px #CCC, 1px 0 black, 0 -1px black;
    padding-bottom:4px;
    margin:10px;
}
#Upgrade {
    width:150px;    
}
#Upgrade a {
    text-decoration:none;
}

但我仍然得到一个下划线。我尝试过使用span的变体，但这也无济于事。我上面做错了吗？

Answer 1

添加

a.mainButton, a.mainButton:hover {
  text-decoration: none;
}

您可以将.mainButton或任何其他类用于a代码并将其css

您已使用#Upgrade设置text-decoration，但它不能用作input ID

您无法通过定位子元素来编写父级的css。您已在a中使用#Upgrade代码作为css的子代，但却相反

Answer 2

#Upgrade a

表示您在a内选择#Upgrade。在您的情况下，相反，#Upgarde位于a。

所以你可以写

a #Upgrade {...}

或更简单

#Upgrade {...}

Answer 3

你可能会错过你的锚定目标，你可以尝试使用像这样的类

＆＃13;

  .Buttons {
    background-color:#D93F87;
    height:50px;
    width:100px;
    border-radius:10px;
    font-size:32px;
    color:#FFFFFF;
    text-align:center;
    text-shadow: -2px 0 #CCC, 0 1px #CCC, 1px 0 black, 0 -1px black;
    padding-bottom:4px;
    margin:10px;

   }
   #Upgrade {
        width:150px;
    }
   .test {
      text-decoration: none;

    }

＆＃13;

<a class="test" href="upgrade.php">
<input type="button" class="Buttons" id="Upgrade" value="Upgrade">
<span>This text is not underline</span>
</a>

＆＃13;

如何使用CSS

3 个答案: