更改Jumbotron

Question

我有一个jumbotron，顶部有一个占位符来处理页面上的错误。该错误有一个<p>标记及其自己的类，我想修改该元素的大小。然而，jumbotron（Bootstrap）的内置段落样式似乎覆盖了我设置的任何内容。我不想更改此特定元素的全局<p>大小。

HTML：

    <div class='jumbotron'>

         <div class='alert alert-danger alert-dismissible' role='alert' id= "landing-page-error">
          <button type='button' class='close' data-dismiss='alert' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
          <span class='glyphicon glyphicon-warning-sign' aria-hidden='true'>  </span>
<p class = "error-message"> Sign-Up Error </p>

        </div>

CSS：

#landing-page-error {
 width: 100%;
 position: absolute;
 top: 0; /* this and the position: absolute has the error message pop up right below the header nav bar in landing page */
 height: 10%;
}

.error-message {
  font-size: 10px;
}

这是一个Rails应用程序，这里是浏览器内部CSS的屏幕截图 -

请帮我设置专门针对错误元素的<p>标记的大小。先感谢您。

Answer 1

.jumbotron .error-message {
    font-size: 14px;

}

如果这不起作用，那么试试这个：

.jumbotron p.error-message {
        font-size: 14px;
}

它会影响error-messages内的所有jumbotron，而不会影响您网页中的其他<p>代码。

Answer 2

没有问题只是在P标签之前关闭Div类

jquery-ui.structure.css