Question

如果这个问题很荒谬，请原谅我。我需要做这样的事情。

我的css文档中有两个外部html文件。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/mdb.css">

我的html中有form如下：

<form class="form-horizontal">
    <fieldset>
        <!-- Form Name -->
        <legend>New Affiliate Signup</legend>

        <!-- Text input-->
        <div class="form-group">
            <label class="col-md-4 control-label" for="fname">First Name</label>  
            <div class="col-md-5">
                <input id="fname" name="fname" type="text" placeholder="First Name" class="form-control input-md" required="">
            </div>
        </div>
    </fieldset>
</form>

mdb.css - 包含与bootstrap.css相同的类和ID，但它们已被操作以提供高级视觉效果（悬停，按钮颜色，阴影颜色和其他高级功能））而不影响bootstrap.css

的核心内容

但我不需要mdb.css来影响我的<form>，但我还需要我<html>文件中的其他元素（标题，轮播等...）

由于我已经链接了mdb.css，因此会影响所有元素，包括<form>。

我是否只能将bootstrap.css与<form>关联，而无需关联mdb.css而无需移除mdb.css内的<head>

将<div>放在<form>周围并仅将bootstrap.css样式表设置为<div>？

请有人帮助我？

Answer 1

我认为一个解决方案可能是添加一个类＆＃34;没有-mdb＆＃34;到您的表单并添加＆＃34;：not（.without-mdb）

Answer 2

您无法将CSS文件应用于元素。您可以将CSS文件中的CSS规则应用于元素。

要保持<form>元素的引导样式并保留两个CSS文件而不更改头部，您必须向<form>添加特定选择器（如一个类.no-mdb）并用higher specificity表示一些额外的CSS规则，它们将mdb样式恢复为引导样式。

这是一个有效的例子：

.no-mdb {
  /* your reverting styles go here.
     make sure your styles have a higher specificity to properly overwrite your existing styles */
  color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-xs-6">
  <form>
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleSelect1">Example select</label>
      <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    </div>
  </form>
</div>

<div class="col-xs-6">
  <form class="no-mdb">
    <div class="form-group">
      <label for="exampleInputEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
    </div>
    <div class="form-group">
      <label for="exampleInputPassword1">Password</label>
      <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <label for="exampleSelect1">Example select</label>
      <select class="form-control" id="exampleSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
    </div>
  </form>
</div>

然而，更好的方法是，正确处理 mdb.css 中的表单。

Answer 3

为什么不在你的mdb.css样式表中添加单个类来执行你想要它做的事情并将其包含在你的元素中？而不是尝试更新标准引导类。

这是更简单的选项，但需要对mdb.css样式表进行一些重构。

示例

.redBackground { /* !important rule overrides any existing styles on the element */ background: red !important; }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <form class="form-horizontal"> <fieldset>  <legend>New Affiliate Signup</legend>  <div class="form-group"> <label class="col-md-4 control-label" for="fname">First Name</label> <div class="col-md-5">  <input id="fname" name="fname" type="text" placeholder="First Name" class="form-control input-md redBackground" required=""> </div> </div> </form>

如何链接外部css文件仅影响1 div并且不影响所有其他div

3 个答案: