html - css 文件中的某些 CSS 样式未应用，但在添加到 Html 页面的标题时它们起作用

Question

我以前有两个 CSS 文件，而 html 页面需要一个中的一些 css，而另一个只需要部分 css。代码部分已复制并粘贴到第一个 CSS 文件，但这些样式并未应用于 HTML 页面。当我在标题中创建一个 block 并将复制的 css 样式添加到 html 文件中时，将应用样式。我希望样式从链接的 css 文件开始工作。

我检查了链接的 url 是否正确，实际上使用了其他一些 css 文件样式。

我检查了我是否将 html 元素添加到错误的父元素中，但似乎并非如此。

CSS 文件:

#d_content_external{
    line-height: 1.8;       
    padding: 20px;  

}
#d_links_indent{
    margin-left: 40px;
}

/* OTHER STYLING ABOVE */




/* CODE BELOW ONLY WORKS IN HTML HEADER, NOT FROM HEADER FILE*/
#buttonwrapper{
     padding: 10px 10px 15px 10px;  
}
#attrwrapper{
    position: relative;
    display: inline-block;
    width: 100%;
}
#dropupbtnIMG{
    width: 100%;    padding: 10px;
    font-size: 12px;    font-weight: bold;
    background-color: #4d79ff;  color:black;
    float: right;
}

/* attribution content DIV */
#divattributions{ 
    min-height: 60px;   max-height: 290px;
    padding: 10px;

    width:90%;

    font-size:14px; display: none;  position: absolute;
    bottom: 100%;

    border-style: solid;    border-width: 4px;
    border-radius: 6px;

    background-color: #b3ffcc;
    right: 0;

    overflow:scroll;
}
.image_attributions{
    margin-bottom:8px;  border:solid; 
    border-width:thin;
}
.ATTRlabel{
    background-color:#ff9999; padding:5px;
}

.ATTRsource{
    background-color:#99ccff; padding:5px;
}

.ATTRlicense{
    background-color:#ff9999; padding:5px;
}

.ATTRattribution{
    background-color:#99ccff; padding:5px;
}

.ATTRchangesmade{
    background-color:#ff9999; padding:5px;
}

<!--file imports-->

    <link rel="stylesheet" type="text/css" href="{% static '/styles/family-pages-styles.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/styles/layout-2.css' %}">

    <link rel="stylesheet" type="text/css" href="{% static '/styles/family-images-styles.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static '/styles/colorscheme.css' %}">



<!--the html elements-->


<div id="buttonwrapper" class="col_backmain">
    <div id="attrwrapper">

        <div id="divattributions" class="col_sidebar"> 

            <h4 style="margin:10px;">Image Attributions:</h4>

                <div style="height:auto; width:100%;">

                    <div class="image_attributions">
                        <div class="ATTRlabel">
                            <b>(ID):</b> 1 | Instrument Parts 
                        </div>
                        <div class="ATTRsource">
                            <b>Source:</b> https://pixabay.com/vectors/cornet-musical-instrument-blowing-37676/
                        </div>
                        <div class="ATTRlicense">
                            <b>License:</b> Pixabay License
                            ( <a href="https://pixabay.com/service/license/">Link to license document</a> )
                        </div>
                        <div class="ATTRattribution">
                            <b>Attribution:</b> Clker-Free-Vector-Images (www.pixabay.com)
                        </div>
                        <div class="ATTRchangesmade">
                            <b>Changes made:</b> Graphic squeezed horizontally. Own annotation text added around the instrument graphic.
                        </div>                  
                    </div>

Answer 1

您的 CSS 文件似乎已缓存。在 Django 中，默认缓存静态文件，因此请尝试以隐身模式打开页面或尝试进行硬刷新(在 chrome 中为 shift + f5，在 firefox 中为 ctrl + f5)。