如何防止一个按钮的样式/颜色影响网站上的其他按钮？
如何防止一个按钮的样式/颜色影响网站上的其他按钮？
提问于 2021-10-17 14:05:49
新手来了。
我正在创建一个按钮，但是当我将它上传到网页上时，它会通过更改样式来匹配新按钮来影响其他每个按钮。
我不知道如何使样式特定于该按钮，并使其不影响网站上的任何其他内容。谢谢！
<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>
回答 5
Stack Overflow用户
回答已采纳
发布于 2021-10-17 14:21:13
您可以创建特定的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>
Stack Overflow用户
发布于 2021-10-17 14:23:42
你可以保留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/
Stack Overflow用户
发布于 2021-10-17 14:24:17
您可以定义类的样式，此代码段使用类名mybutton，并显示一个添加了类的代码段和一个没有添加类的代码段。
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69605106
复制相关文章
相似问题
腾讯云开发者
