我正在设计此网页。我正在使用bootstrap,html,css,jsp。
我希望我的样式位于mystyles.css
文件中。
在我的jsp中,我有这行:
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/mystyles.css" />
基本上,这只是我的mystyles.css文件的链接。
该文件仅包含基本的CSS内容,编辑边距,居中等
.center_div {
text-align: center;
max-width: 25%;
}
.top-buffer {
margin-top: 20px;
}
.img-space {
margin: 20px;
}
.bdr {
border: 1px solid black;
}
.longform {
width: 350px;
}
当我尝试将bdr类添加到div col时,它不起作用。但是,当我直接将样式直接添加到我的jsp中时,它正在工作。
工作方式:
<div class="col-sm-6">CITY ADDRESS: <input style="width:350px" type="text" /></div>
<div class="col-sm-4" style="border: 1px solid black" >LAST NAME: <input type="text" /></div>
无法运作:
<div class="col-sm-6">CITY ADDRESS: <input class="longform" type="text" /></div>
<div class="col-sm-4" class="bdr" >LAST NAME: <input type="text" /></div>
但是我输入的其他CSS样式也可以使用,例如center_div,top_buffer等。其他页面也使用
mystyles.css
。当我只将
"style:..."
而不是将其放置到class="..."
并将其链接到页面时,为什么它起作用? 最佳答案
您不能两次使用class属性
<div class="col-sm-4" class="bdr" >LAST NAME: <input type="text" /></div>
↑ ↑
它必须像这样,在
col-sm-4
和bdr
之间有一个空格<div class="col-sm-4 bdr" >LAST NAME: <input type="text" /></div>
样本片段
.bdr {
color: red;
}
<div class="col-sm-4" class="bdr" >LAST NAME: <input type="text" /></div>
<div class="col-sm-4 bdr" >LAST NAME: <input type="text" /></div>
您的代码示例以及我的更新现在都可以使用,并且如果它不在您自己的完整代码中,则您可能还有另一个规则会干扰
.bdr
规则。另请注意CSS specificity影响哪个规则将适用
.center_div {
text-align: center;
max-width: 25%;
}
.top-buffer {
margin-top: 20px;
}
.img-space {
margin: 20px;
}
.bdr {
border: 1px solid black;
}
.longform {
width: 350px;
}
Working:<br><br>
<div class="col-sm-6">CITY ADDRESS: <input style="width:350px" type="text" /></div>
<div class="col-sm-4" style="border: 1px solid black" >LAST NAME: <input type="text" /></div>
<br><strike>Not</strike> working:<br><br>
<div class="col-sm-6">CITY ADDRESS: <input class="longform" type="text" /></div>
<div class="col-sm-4 bdr" >LAST NAME: <input type="text" /></div>
关于html - CSS文件未实现,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36952156/