无法覆盖Bootstrap

Question

首先，我在这里和谷歌上研究了一整天这个主题，并尝试了我所发现的一切，出于某种原因，我似乎仍然无法改变引导程序的样式。我的自定义css确实有效，因为它的第一次修改在不需要覆盖任何内容的地方效果很好(所以没有默认的输入样式：悬停，我在引导程序中使用的。(

这里有一些代码：

.input-group-prepend.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}

注意，这里的选择器必须像我尝试的第20个版本一样。在这里，我不能改变输入字段在聚焦时的行为方式。在谷歌上搜索了十几次之后，我尝试了所有的方法，但都没有成功。我还使用Chrome Inspect来查找使用box shadow的位置，在Inspect中，我还可以CHANGE属性，这产生了我想要的外观，但在使用css选择器将该部分复制到我的css后，它就不再工作了。我还尝试过调整选择器以使其更具体，计算了"优先级点"或它们被称为偶数的任何东西，使用了ID和其他东西，并将我的样式表链接放在html文件中引导程序的链接之后-没有改变(这是更好的(。这些都适用于这里、YouTube和互联网上的其他人，似乎我也有同样的情况和解决方案，但对我来说，他们仍然没有。我正在考虑离开bootstrap，尝试从头开始构建一些东西，但我在CSS方面没有那么丰富的经验，如果是这样的话，我觉得我永远都不想成为。[在此输入图像描述][1]

更多代码：

button .btn-raised {
box-shadow: 0 30px 0 0 #007299;
}

第二部分，当尝试为按钮设置框阴影时，这是不可能的，尽管我使用的btn或btn light都不会对框阴影做任何事情，Chrome Inspect只是将"none"显示为该属性的值。(尽管我发现它涉及到一些转换，但我无法覆盖或禁用它。(再次尝试了大量选择器变体。

---

UPDATE：问题解决了，原来我遇到的所有问题都是因为我错过了在重新加载页面之前清除缓存-永远不要忘记！：(

Answer 1

对我来说似乎工作得很好。我认为你可能在Bootstrap之前加载了CSS，或者由于特殊性，你有其他样式覆盖了你的最新样式。

作为最后的手段，为了测试这个理论，你可以尝试添加！在你的风格之后很重要。如果这有效，那么你知道这是选择器特定性的问题，但我不建议使用！一般来说很重要。

例如：

div {
background-color: #000 !important;
}

button {
	box-shadow: 2px 5px 1px 0 #007299;
}
.input-group-prepend {
margin-top: 20px;
}
.input-group-prepend .form-control:focus {
color: #495057;
background-color: #fff;
border-color: #fff;
outline: 0;
box-shadow: inset 0 11px 20px rgba(0,0,0,0.19), inset 0 6px 6px rgba(0,0,0,0.23);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-light">I am a button</button>
<div class="input-group-prepend">
	<input type="text" class="form-control">
</div>