Question

首先，我在这里和通过Google进行了一整天的研究，并尝试了所有发现的内容，由于某些原因，我似乎仍然无法更改Bootstrap样式。我的自定义CSS确实可以工作，因为从它进行的第一次修改就可以在不需要覆盖任何内容的地方很好地发挥作用（因此，在引导程序中，我没有使用input：hover的默认样式）

以下是一些代码：

.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个版本。在这里，我无法更改焦点对准时输入字段的行为方式。在Google上进行了十几次搜索之后，我尝试了所有方法，但没有任何效果。我还使用Chrome Inspect查找了使用框阴影的位置，并且在Inspect中还可以CHANGE该属性，从而获得了所需的外观，但是在使用css选择器将该部分复制到我的css之后，不再工作了。尝试过还要调整选择器以使其更具体，计算“优先点”或称其为偶数，使用ID或其他任何东西，并将我的样式表链接放在html文件中的引导目录之后-不变（更好），那是）。所有这些都为这里，YouTube以及互联网上的其他地方的其他人提供了服务，似乎我有完全相同的情况和解决方案，但对我而言，它们仍然没有。我正在考虑离开引导程序并尝试从头开始构建某些东西，但是我对CSS的经验并不丰富，而且我感觉自己永远都不想成为这样。[在此处输入图片描述] [1]

更多代码：

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

第二部分，当尝试设置按钮的框阴影时，即使我使用的btn或btn-light都不能对框阴影做任何事情，Chrome Inspect都不会显示任何内容'作为此属性的值。（尽管我发现其中涉及一些过渡，但无法覆盖或禁用它。）同样，尝试了很多选择器变化的地狱。

情感的东西，如果您只是对技术问题感兴趣，请不要阅读：

当我成为开发人员时，我喜欢它的设计/前端，并且一直想做到这一点。生活对我来说是一条不同的道路，这很好，现在我什至认为一定有一个守护天使在那儿看着我，因为这就像f ***一样糟糕。我不敢相信现在的前端要容易得多，我宁愿花几天的时间研究旧版OOP代码中的数百个类以查找错误的来源，而不是试图找出CSS不能按其描述的方式工作的原因。。也就是说，我会在任何一天参加第一个。曾经去过那里的人-真的一定要感到沮丧吗？我知道，“轻松一点”在这里是一个很好的建议-但我不是那个人，我讨厌被困住并且对某些事情没有解决办法。

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

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>

无法覆盖Bootsrap

1 个答案: