在我的页面的特定部分调用<link rel =“”stylesheet“”href =“”“”/>而不覆盖我当前的CSS样式

时间:2016-03-04 06:34:23

标签: javascript php jquery css jquery-file-upload

我试图在header.php中调用<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">,该页面链接到post_form上的jQuery文件上传器的post_form页面,而不会覆盖页面其余部分的css。我试图删除左表格单元格,试图将文件上传器向左浮动,并尝试将文件上传器的宽度扩展到100%无效。

代码更新

<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.

1 个答案:

答案 0 :(得分:0)

最具特色的css选择器将是选择的,如果选择器相等,将选择最后一个选择器

所以

#divID{

}

将覆盖

int sum = 0;
//search number of occurences for each alphabet in the string
for (i=0; i<26; i++) {
   sum += (numchar(str, 'a' + i) +1) / 2; //round up
}

上面的选择器比上一个选择器更加明显。如果他们在同一个地方,那么最后一个将被选中。我觉得你最后加载了你的css,并覆盖了你的css文件中的bootstrap