css 更改一个页面中按钮的样式,而不影响其他页面中的其他按钮

2w2cym1i  于 2022-12-30  发布在  其他
关注(0)|答案(3)|浏览(281)

你知道我该怎么做吗?

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按钮”,让css文件知道这是我正在编辑的联系我们页面,但它不会工作,它只会改变我的其他页面的风格,以及如此本质上。

body .contact button {
    background:

但是这不起作用,有什么想法我可以改变这个按钮的风格而不影响我的css文件中的其他按钮吗?

6jjcrrmo

6jjcrrmo1#

.contact并不意味着联系人页面,而是指一个名为contact的类。
你可以给予每个按钮一个不同的类,例如,如果你想一个是红色的,另一个是蓝色的:
HTML页面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;
}

把颜色改成你自己的风格就行了。希望这对你有帮助。

8i9zcol2

8i9zcol22#

你真的需要在网上搜索"CSS选择器",并学习如何以及为什么使用它们。
一个例子:创建对所有button都为真的CSS规则,并使用特定的选择器创建这些规则的例外。例如,所有按钮都是 * 绿色 *,除了联系人按钮是 * 红色 *。

  • generic * 规则可以放在单独的CSS文件中,并在文档中进行<link>编辑。使用<style>块在文档中创建 * specific * 规则,以覆盖/修改/添加到链接的一般规则。

有许多替代方法来解决您的问题,这只是其中之一...

    • 提示:**CSS规则只不过是一个逻辑语句的优雅列表,这些语句从简单的选择符到几乎无法解释的选择符不等,用来修改文档的样式:
if selector,
   list-of-selectors,
   very-special-selectors
   what-does-this-one-do?!?-selector then { property: value }
    • 示例**

x一个一个一个一个x一个一个二个x

kgsdhlau

kgsdhlau3#

假设我们有一个按钮
第一个月
我们必须使用这个CSS/样式

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);
}

会有用的谢谢

相关问题