Question

我有以下HTML5代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>AUMC-Student Portal</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css2/paper.css" rel="stylesheet" media = "screen">
         <link href="css2/bootstrap.css" rel="stylesheet" media = "screen">



        <style>
        form{
            width: 300px;
            margin: 0 auto;
            vertical-align: middle;
            padding-top: 15%;
        }

        </style>
    </head>

    <body>

        <form id = "AllControls" class="Controls">
            <fieldset id = "fomrControl" class = "Inputs">
                <br>
                <input type = "text" class = "form-control" placeholder="Username" />
                <br>
                <input type = "password" class = "form-control" placeholder="Password" />
                <br>
                <br>
                <button type="submit" class="btn btn-default">Forgot</button>   
                <button type="submit" class="btn btn-primary">Login</button> 
                <br>
            <fieldset/>
        <form/>
    </body>
</html>

我正在链接两个CSS文件，其中一个是 paper.css ，另一个是 bootstrap.css 。这是当我单独应用它们评论另一个时的内容。

现在，我希望我的输入字段能够使用 bootstrap.css 和按钮进行外观，以便使用 paper.css 进行查看。但是当我包含两个CSS文件时，它给了我一个我不想要的混合物，因为它们都影响了输入字段和按钮。我尝试在CSS文件中更改类名并且它在某种程度上起作用但是它的痛苦就是这样找到可能影响你元素的每一行。另外，我知道不推荐使用范围样式中的@import。

所以，

有没有办法定位我的输入字段和按钮，只使用其中一个CSS文件而不改变CSS文件？

Answer 1

尝试为按钮创建自定义类，然后从paper.css文件复制按钮的css代码并将其应用到自定义类。

如何定位特定标记受特定CSS文件影响

1 个答案: