html - CSS 文件未实现

Question

我正在设计这个网页。我正在使用 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="..." 并将其链接到页？

Answer 1

不能两次使用类属性

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