如何防止按钮的 style/colour 影响站点上的所有其他按钮？

Question

这里是新手

我正在创建一个按钮，但是当我将它上传到网页时，它会通过更改样式以匹配新按钮来影响所有其他按钮。

我不知道如何使样式仅针对该按钮，并且不影响网站上的任何其他内容。谢谢！

<html>

<head>
  <style>
    a:link,
    a:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a:hover,
    a:active {
      background-color: #810001;
    }
  </style>
</head>

<body>
  <a href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>

</html>

Answer 1

您可以制作特定的 ID（使用 #）或 class（使用点 . 可以在 html 中多次使用 dom 如果您将多次使用按钮）

<html>

<head>
  <style>
    a#someId:link,
    a#someId:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a#someId:hover,
    a#someId:active {
      background-color: #810001;
    }
  </style>
</head>

<body>
  <a id="someId" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>

</html>

Answer 2

这就是您使用 'classes' 或 'ids' 的目的。它们有助于 class 一种页面元素类型，或确定您想要在 CSS 中定位的特定元素。正如@Rana 所建议的，w3schools 有一个可能有用的页面

Answer 3

您可以保留class或id来解决这个问题。

<a id="explore-projects" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10"> </a>

将 CSS 添加到这个特定的 id 元素。检查这个：http://jsfiddle.net/wzfs238L/

Answer 4

您可以定义 class 的样式，此代码段使用 class name mybutton 并显示一个添加了 class 和一个没有添加

的样式。

<html>

<head>
  <style>
    a.mybutton:link,
    a.mybutton:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a.mybutton:hover,
    a.mybutton:active {
      background-color: #810001;
    }
  </style>
</head>

<body>
<h2>With mybutton class</h2>
  <a class="mybutton" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
  <h2>Without mybutton class</h2>
    <a href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
</body>

</html>

Answer 5

在 HTML 元素上使用 id，并在样式上添加 #。 id 必须是唯一的。有关 id 的进一步阅读，请单击 here。

<html>

<head>
  <style>
    a:link,
    a:visited {
      background-color: #E31837;
      color: white;
      width: 300px;
      padding: 10px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      line-height: 1.3;
    }
    
    a:hover,
    a:active {
      background-color: #810001;
    }
    
    #fabulous{
      background-color: yellow;
      color:maroon;
      margin-top:1rem;
    }
    
    #fabulous:hover,
    #fabulous:active {
      background-color: #fcc726;
    }
  </style>
</head>

<body>
  <a href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">Want to explore how to integrate<br>these projects into your classroom?</a>
  
  <a id="fabulous" href="https://calendly.com/akalmin-/15min?month=2021-10" target="https://calendly.com/akalmin-/15min?month=2021-10">This one is fabulous</a>
</body>

</html>

如何防止按钮的 style/colour 影响站点上的所有其他按钮？

How to prevent a button's style/colour from affecting every other button on the site?

html

css

button