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

您不能两次使用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>

Answer 2

你是否检查了元素。它是否显示课程？如果它正在加载，那么来自其他类的border属性会覆盖bdr的边界。在这种情况下，你应该尝试在border属性之后重要！喜欢

.bdr{
   border:1px solid black !important;
}

如果您的css文件由jsp加载，它将起作用。

CSS文件没有实现

2 个答案: