Javascript 为什么不是'；t我的样式表覆盖引导'；s

我读过无数次，如果你在你自己的CSS样式表中定义了一个引导类，你将覆盖它们，这样你创建的元素将拥有你想要的预定义样式

虽然这对页面的一半是正确的，但我使用class

form控件的输入按钮不起作用，我也不知道为什么，因为其他人都有这个问题

以下是我的问题的一个片段：


var searcher=document.getElementById（'buscador'）；
searcher.addEventListener（“单击”，函数（）
{
var master=searcher.parentNode；
searcher.removeChild（searcher.childNodes[0]）；
searcher.style.animationName=“expandismo”；
searcher.style.animationDuration=“1s”；
setTimeout（函数（）{
移动儿童大师（搜索者）；
var barraSearch=document.createElement（'input'）；
setAttribute（'type'，'text'）；
setAttribute（'id'，'barraSearch'）；
setAttribute（'class'，'form control'）；
setAttribute（'placeholder'，'Buscar…'）；
var spanCheto=document.createElement（'span'）；
var botonCheto=document.createElement（'button'）；
var secondSpan=document.createElement（'span'）；
setAttribute（'class'，'input group btn'）；
setAttribute（'class'，'btn-btn-default'）；
setAttribute（'class'，'glyphicon-glyphicon-search'）；
setAttribute（'aria-hidden'，'true'）；
二次跨度；
spanCheto.appendChild（botonCheto）；
主治儿童（barraSearch）；
barraSearch.focus（）；
}, 1000);
}，假）
。容器流体
{
文本对齐：居中；
}
#托普兰
{
颜色：白色；
背景图片：url（citybackground.jpg）；
背景大小：100%100%；
最小高度：400px；
}
#博特兰
{
}
#头骨
{
边缘顶部：130像素；
颜色：黑色；
文本阴影：0px 0px 12px白色、0px 0px 8px白色、0px 0px 3px白色、0px 0px 5px白色；
字体系列：“新罗马时代”，时代，单空格；
字体大小：60px；
}
#布斯卡多
{
颜色：#5959；
宽度：40px；
高度：40px；
边界半径：18px；
背景颜色：浅灰色；
光标：文本；
}
#布斯卡多：悬停
{
背景颜色：浅灰色；
不透明度：1；
}
#巴士司机：主动
{
背景色：白色；
}
.输入组
{
宽度：100%；
文本对齐：居中；
}
.表格管制
{
宽度：70%；
边界半径：18px；
背景颜色：浅灰色；
高度：40px；
左侧填充：10px；
字体大小：20px；
颜色：黑色；
}
.窗体控件：焦点
{
盒影：0px 0px 5px#66d9ff；
盒影：0px 0px 10px#66d9ff；
盒影：0px 0px 8px#66d9ff；
盒影：0px 0px 12px#66d9ff；
}
@关键帧展开
{
从{宽度：40px}
到{宽度：70%}
}

价格浏览常见问题
价格浏览常见问题

这是因为引导程序获得带有两个类别的
.form控件
，并且这种类型的选择
.input组。form控件
比刚才的
.form控件
更强

.input-group .form-control{

}

使用此选项计算哪个选择器更强

检查此屏幕截图第一个选择器有3个点，第二个只有两个点，因此无论您将第一个选择器放置在何处，它们都比第二个强。每个id有100个点，类有10个点，标签有1个点，你应该添加！对于未拾取的属性很重要。
比如：

浏览器CSS检查器的设计目的就是向您展示这类内容。要做到这一点，请添加所有内容！重要的。它覆盖了it@UnknownDeveloper那是个可怕的建议！！考虑CSS专一性。您发布的HTML中没有
表单控件
。@ZimSystem它是由JavaScript代码添加的类。几乎总是有比
更好的解决方案！重要信息
！重要信息
是最邪恶的事情，应该避免。编写更好的css将覆盖样式。
！重要提示
不是强烈推荐的，而且它会忽略我的所有修改。这会在.form出现问题时修改所有修改。control@Yacomini它只会修改
.form控件
，因为这正是您所指向的。如果是所有的类，它们都是逗号分隔的。@DrewKennedy哦，对不起，我错过了那部分，我的错。我试试看out@DrewKennedy我以前在我的输入上有一个带有样式的id，但它也被忽略了，我想这很奇怪。我不确定这一点，但id选择器比类选择器更强大，所以它应该可以与id一起工作
.input-group .form-control{

}

.form-control
{
    width: 70%!important;
    border-radius: 18px!important;
    background-color: lightgrey!important;
    height: 40px;
    padding-left: 10px;
    font-size: 20px;
    color: black;
}