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

问题描述

我之前有两个 CSS 文件，而 html 页面需要来自一个的一些 css，而另一个只需要一个 css 的一部分。这段代码被复制并粘贴到第一个 CSS 文件中，但这些样式并未应用于 HTML 页面。当我在标题中创建一个块并将复制的 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>

标签： htmlcssdjango

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

问题描述

解决方案

推荐阅读