我的表单控件css选择器不工作

你好，伙计，我只是不知道我做得对不对。我想在我的网站上调整输入的大小，它被定义为类“表单控制”，但是当我做css时，上面的内容没有任何变化。如果我的选择器错误或代码错误，有人能帮我吗？多谢各位

---

p.S下面的测试只是一个示例，如果css在我的编辑器中被链接，并且是的，红色正在被执行

您正在使用引导，并且

表单控件

类是从引导css使用的

使用（简易方式）

在引导CSS上重写代码

最佳实践-

在您的例子中，类是

。表单控件

（引导类） 要克服这个问题，需要定义新类并向自己的类添加新的更改

.form-control{
      width: 150px !important;
}

并在HTML代码中使用此

表单控件覆盖

，而不是

表单控件

尝试以下操作：

注意：您缺少关闭第一个div的功能，即

.form控件：：-webkit输入占位符{
颜色：红色；
宽度：250px；
}
h1{
颜色：红色；
}

电邮：
用户名：
密码：
测验

选择器越具体，优先级越高。例如：

  .form-control-override{
          width: 150px;
    }

即使红色背景是在蓝色背景之后定义的，但第一个背景在应用它的类中更为具体，如果您有以下代码，蓝色背景将被应用：

.mydiv .myclass {
    background-color: blue;
}

.myclass {
    background-color: red;
}

然后在css中指定宽度：

<form class="form-inline cool-form">
    <div class="well">
        <div class="form-group ">
          <div class="input-group col-sm-12">

            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
            </div>

            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
            </div>

            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
            </div>
          </div>
        </div>
    </div>
</form>

---

首先检查您的css文件是否已附加到页面，并且它必须位于bootstrap.css之后，以便您的示例对我有效。您的代码对我有效。有没有办法检查你的整页代码？@PonsPurushothaman我只是bootstrap.min.css而已，但是下面的评论告诉我这是一个错误！重要的是工作。但似乎其他人说它不好用！在css中很重要。有其他解决方案吗？@expert123编辑了答案。具有最佳实践。希望对你有帮助，这是有效的！你能解释更多或者给我一些关于这件“重要的”事情的文章吗？如何及何时使用it@KamaalABOOTHALIB没有使用任何解决方案！重要的thanks@KamaalABOOTHALIB您应该在这里阅读更多关于如何使用的信息！重要的这应该会启发你在CSS@expert123上的能力是的，创建你的另一个类，即“.inputW150{width:150px}”，并将其添加到类旁边。表单控件“@expert123如果解决了你的查询，请将问题标记为已回答。特定于浏览器的答案是最糟糕的解决方案。

.mydiv .myclass {
    background-color: blue;
}

.myclass {
    background-color: red;
}

<div class="mydiv">
    <div class="myclass">
    </div>
</div>

<form class="form-inline cool-form">
    <div class="well">
        <div class="form-group ">
          <div class="input-group col-sm-12">

            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Email here" ng-model="Email" required/>
            </div>

            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Username here" ng-mode="Username" required/>
            </div>

            <div class="col-sm-4">
              <input class="form-control" placeholder="Enter Password here" ng-mode="Password" required/>
            </div>
          </div>
        </div>
    </div>
</form>

.cool-form .form-control {
    width: 250px;
}