在不影响其他页面上的按钮的情况下，更改一个页面上按钮的样式

Question

关于如何执行这个，有什么想法吗?

button {
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);}

我试图添加"body .contact button"为了让CSS文件知道这是我正在编辑的联系我们页面，但它不会工作，它只会改变我其他页面的样式，所以基本上。

body .contact button {
background: 

，但这不起作用，任何想法我可以改变这个按钮的样式，而不影响其他在我的CSS文件?

Answer 1

.contact不是指联系人页面，而是指一个叫做contact的类。

你可以给每个按钮一个不同的类，例如，如果你想一个是红色的，另一个是蓝色的:
HTML page 1:

<button class="button-red">This is a red button</button

HTML第2页:

<button class="button-blue">This is a red button</button

CSS文件:

.button-red {
background-color: red;
}
.button-blue {
background-color: blue;
}

把颜色改成你自己的样式。希望对你有帮助。

Answer 2

你真的需要在网上搜索'CSS选择器'，并学习如何以及为什么使用它们。

示例:创建对所有button都为true的CSS规则，并使用特定的选择器创建这些规则的例外。例如，所有的按钮都是绿色，除了联系人按钮是红色。

通用的规则可以放在一个单独的CSS文件中，<link>可以放在一个文档中。用<style>块在文档中创建特定的规则，以覆盖/修改/添加到链接的通用规则中。

有很多方法可以解决你的问题，这只是其中之一…

提示:CSS规则只不过是一个复杂的逻辑语句列表，从简单的选择器到几乎无法解释的选择器，都可以用来修改文档的样式:

if selector,
list-of-selectors,
very-special-selectors
what-does-this-one-do?!?-selector then { property: value }

/* put this in an external CSS file */
button         { background-color: green }
/* put this in a <style> block */
button.contact { background-color: red }

<button>generic 1</button>
<button>generic 2</button>
<button>generic 3</button>
<br>
<button class="contact">contact</button>

Answer 3

假设我们有一个按钮

<button> your text </button>

我们必须使用这个CSS/style

background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);

那么，我们将给按钮添加一个id，比如

<button id="contact-btn"> your text </button>

，然后使用id选择器

添加样式

#contact-btn{
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}

it will work thanks