Chrome没有生效的CSS覆盖

Question

因此，我尝试在chrome检查器中操作样式并将其直接复制到我的样式表中，但是当我再次在chrome上运行它时，该样式不会反映出来。否则，如果我在chrome inspector中手动输入更改，代码也可以在firefox上正常运行。

由于我也尝试添加！important并确保层次结构的顺序正确，所以不确定是什么问题。

css代码

.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
}
.is-invalid .select2-container--default .select2-selection--single {
    box-shadow: none;
    border: 1px solid #dc3545 !important;
}

html

<div class="form-group d-flex flex-wrap justify-content-between {{ $errors->first('contact_name', 'is-invalid')  }}">
    <label for="contact_name">Name</label>
    <span class="message">{{ $errors->first('contact_name', ':message') }}</span>
    <input type="text" class="form-control" id="contact_name" name="contact_name" placeholder="e.g. John Smith">
</div>

我还清除了缓存，并检查了所有更新后的源文件。只是没有显示在结果上chrome

Answer 1

有时需要重新加载。

按住Ctrl键并单击重新加载按钮。或者，按住Ctrl并按F5。

Ctrl+F5

Answer 2

您还可以使用Chrome调试工具清除缓存。按F12，然后选择Application，然后选择Clear Storage，确保选中了cache复选框，然后单击clear site data按钮。

Answer 3

通过右键单击“重新加载”按钮来尝试“重新加载”。