css - 无法覆盖 Bootstrap

Question

首先，我在这里和通过谷歌研究了这个主题一整天，并尝试了所有我发现的东西，出于某种原因我似乎仍然无法改变 Bootstrap 样式。我的自定义 css 确实有效，因为它的第一次修改在不需要覆盖任何东西的地方工作得很好(所以没有默认样式的输入:悬停，我在 Bootstrap 中使用了它。)

这是一些代码:

.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 文件中的 Bootstrap 链接之后 - 没有变化(为了更好， 那是)。这些都适用于这里和 YouTube 以及互联网上任何地方的其他人，似乎我有完全相同的情况和解决方案，但对我来说他们仍然没有。我正在考虑离开 bootstrap 并尝试从头开始构建一些东西，但我在 CSS 方面没有那么丰富的经验，如果是这样的话我觉得我永远不想成为这样的人。[在此处输入图片描述][1]

更多代码:

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

第二部分，当尝试为按钮设置 box-shadow 时，这是不可能的，即使我使用的 btn 或 btn-light 都没有对 box-shadow 做任何事情，Chrome Inspect 只是显示 'none ' 作为此属性的值。 (虽然我发现它涉及一些转换，但我无法覆盖或禁用它。)同样，尝试了很多选择器变体。

---

更新:问题已解决，原来我遇到的所有问题都是因为我没有在重新加载页面之前清除缓存 - 永远不要忘记! :)

Answer 1

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

作为最后的手段，只是为了测试这个理论，您可以尝试在您的样式之后添加 !important。如果这有效，那么您就知道这是选择器特异性的问题，但我一般不建议使用 !important。

例如:

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>