修改bootstrap-datetimepicker-widget CSS样式失效的问题与解决方案

我最终通过如下代码成功解决了问题：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
.ui-datepicker {
  width: 400px;
  height: auto;
  margin: 5px auto 0;
  font: 10pt Arial, sans-serif;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
</style>

我在Django项目中使用bootstrap-datepicker-plus的DatePickerInput组件，多次尝试修改Bootstrap日期时间选择器的CSS样式全部失败，在项目多个位置添加样式代码后，完全看不到组件有任何变化。
我查阅了多个来源的资料，包括两篇Stack Overflow相关帖子并尝试按照建议操作，均未能解决我的问题。

customdatetimepicker2 / forms.py 代码 #

from django import forms
from django.contrib.auth import get_user_model
from django.contrib.auth.forms import ReadOnlyPasswordHashField
from .models import User
from .widgets import BootstrapDateTimePickerInput
from bootstrap_datepicker_plus import DatePickerInput

class RegisterForm(forms.ModelForm):
    password1 = forms.CharField(label='password 1', widget=forms.PasswordInput)
    password2 = forms.CharField(label='Confirm Batman password', widget=forms.PasswordInput)
    class Meta:
        model = User
        fields = ['full_name', 'email', 'd_o_b']
        widgets = {'d_o_b': DatePickerInput(format='%d/%m/%Y')}

bass / css.html 代码 #

<style>
.body .background {color: red}
.body {color: green}
.bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
.bootstrap-datetimepicker{
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
.bootstrap-datetimepicker-widget table {
     width: 870px;
}
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
</style>

customdatetimepicker2 / templates / register3.html 代码 #

{% extends "base5.html" %} 
{% block content %}
<style>
.bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
.body .background {color: red}
.body {color: green}
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.background {color: red}
</style>
<div class="container">
    <div class='row'>
        <div class='col-5'>
            <form method='POST' enctype="multipart/form-data"> {% csrf_token %}
                <table class="table" style = "border: none">
                    <thead style="border: none"></thead>
                    <tbody style="border: none">
                        {% for field in form.visible_fields %}
                                <tr style="border: none">
                                    <td style="border: none">{{ field.label_tag }}</td>
                                    <td style="border:none" id="{{ field.id }}">{{ field }}{{ field.errors }}</td> 
                                </tr>
                        {% endfor %}
                    </tbody>
                </table>
                <button type='submit' class='btn btn-default'>Submit</button>
            </form>
        </div>
    </div>
</div>
<script>
    var currentdate = new Date();
    var mindate , year , month , day;
    currentdate.setDate(currentdate.getDate() - 21);
    year = currentdate.getFullYear();
    month = currentdate.getMonth()+1;
    day = currentdate.getDate();
    mindate = month.toString() + '/' + day.toString() + '/' + year.toString();
  $( function() {
    $( "#id_d_o_b" ).datepicker({
        startDate: mindate
    });
  } );
$( function() {
    $( ".bootstrap-datetimepicker-widget" ).css("background-color", "#4d3e43")
});
$( function() {
    $( ".bootstrap-datetimepicker-widget" ).css("background-color", "#red")
});
$( function() {
    $( ".bootstrap-datetimepicker-widget" ).css("border", "#green")
});
$( function() {
    $( ".bootstrap-datetimepicker-widget.table" ).css("background-color", "#4d3e43")
});
$( function() {
    $( ".bootstrap-datetimepicker-widget.table" ).css("background-color", "#red")
});
$( function() {
    $( ".bootstrap-datetimepicker-widget" ).css("border", "#green")
});
</script>
{% endblock %}     

customdatetimepicker2 / templates / base5.html 代码 #

<style>
.bootstrap-datetimepicker-widget {
    top: 0;
    left: 0;
    width: 670px;
    padding: 4px;
    margin-top: 1px;
    z-index: 99999;
    border-radius: 4px;
}
.body .background {color: red}
.body {color: green}
.bootstrap-datetimepicker-widget table td span.active {
    background-color: #337ab7;
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.background {color: red}
</style>

内容的提问来源于stack exchange，提问作者Ross Symonds