我正在设计此网页。我正在使用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-4bdr之间有一个空格

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

10-09 17:47
查看更多