dtrotfd1012 2016-03-04 06:34
浏览 99

在没有覆盖我当前的CSS样式的情况下,在我的页面的特定部分调用<link rel =“stylesheet”href =“”>

I am trying to call <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> in the header.php that is linked to my post_form page for the jQuery file uploader that is on the post_form without it overriding the css for the rest of the page. I have tried removing the left table cell, attempted to float the file uploader left, and tried to extend the width of the file uploader to 100% to no avail.

the code update is

<tr>
                        <th>Upload:</th>
                        <td width="250">                              <!-- The global progress state -->
                                <div class="fileupload-progress fade" style="display:none">
                                    <!-- The global progress bar -->
                                    <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
                                    <!-- The extended global progress state -->
                                    <div class="progress-extended">&nbsp;</div>
                                </div>
                            </div>                        
                        <!-- The table listing the files available for upload/download -->
                        </div>                    
                        <table role="presentation"><tbody class="files"><textarea cols="60"></textarea></tbody></table>                                         
                        </form>   
                        
                        <!-- The blueimp Gallery widget -->
                        <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
                            <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                        </div>
                        </td>
                        <td>
                        <form>
                        <label for="theme-switcher">Theme:</label>
                        <select id="theme-switcher" class="pull-right">
                            <option value="black-tie">Black Tie</option>
                            <option value="blitzer">Blitzer</option>
                            <option value="cupertino">Cupertino</option>
                            <option value="dark-hive" selected>Dark Hive</option>
                            <option value="dot-luv">Dot Luv</option>
                            <option value="eggplant">Eggplant</option>
                            <option value="excite-bike">Excite Bike</option>
                            <option value="flick">Flick</option>
                            <option value="hot-sneaks">Hot sneaks</option>
                            <option value="humanity">Humanity</option>
                            <option value="le-frog">Le Frog</option>
                            <option value="mint-choc">Mint Choc</option>
                            <option value="overcast">Overcast</option>
                            <option value="pepper-grinder">Pepper Grinder</option>
                            <option value="redmond">Redmond</option>
                            <option value="smoothness">Smoothness</option>
                            <option value="south-street">South Street</option>
                            <option value="start">Start</option>
                            <option value="sunny">Sunny</option>
                            <option value="swanky-purse">Swanky Purse</option>
                            <option value="trontastic">Trontastic</option>
                            <option value="ui-darkness">UI Darkness</option>
                            <option value="ui-lightness">UI Lightness</option>
                            <option value="vader">Vader</option>
                        </select>
                        </form><!-- The file upload form used as target for the file upload widget -->
<form id="fileupload" action="//jquery-file-upload.appspot.com/" method="POST" enctype="multipart/form-data">
    <!-- Redirect browsers with JavaScript disabled to the origin page -->
    <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="fileupload-buttonbar">
        <div class="fileupload-buttons">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="fileinput-button">
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="start">Start upload</button>
            <button type="reset" class="cancel">Cancel upload</button>
            <button type="button" class="delete">Delete</button>
            <input type="checkbox" class="toggle">
            <!-- The global file processing state -->
            <span class="fileupload-process"></span>
        </div>
        <!-- The global progress state -->
        <div class="fileupload-progress fade" style="display:none">
            <!-- The global progress bar -->
            <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            <!-- The extended global progress state -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <!-- The table listing the files available for upload/download -->
    <table role="presentation"><tbody class="files"></tbody></table>
</form>
<br>
<!-- The blueimp Gallery widget -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls" data-filter=":even">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error"></strong>
        </td>
        <td>
            <p class="size">Processing...</p>
            <div class="progress"></div>
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="start" disabled>Start</button>
            {% } %}
            {% if (!i) { %}
                <button class="cancel">Cancel</button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td>
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
            </p>
            {% if (file.error) { %}
                <div><span class="error">Error</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td>
            <span class="size">{%=o.formatFileSize(file.size)%}</span>
        </td>
        <td>
            <button class="delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>Delete</button>
            <input type="checkbox" name="delete" value="1" class="toggle">
        </td>
    </tr>
{% } %}
</script>
                        </td>
                    </tr>

the fileuploader now shows with the css styles as it is supposed to, but it only appears when on the right side of my post_form

this is how the fileuploader shows when i add audio or video files. it works when it is placed in the right cell of my post_form, but not on the left which is where I would like it to show.

</div>
  • 写回答

1条回答 默认 最新

  • dongzaheng4449 2016-03-04 06:41
    关注

    The most spesific css selector will be the one choosen, if the selectors are equal the last selector will be chosen

    so

    body #divID{
    
    }
    

    will override

    #divID{
    
    }
    

    The above selector is more sepsific than the last one. if they where the same, the last one would be choosen. I sugest you load you're css last, and override bootstrap in you're css file

    评论

报告相同问题?

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?