如何在 bootstrap 3.3.7 框架内为 html 表单的边框正确添加 css 选择器序列？

Question

我尝试了几种父元素和子元素组合，但未能成功向此表单添加样式边框。下面是 html 的浓缩版，但它准确地描述了结构。

<div class="container-fluid page-seven" id="pg7">
    <div class="row"> 
        <div class="col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
            <form id="newUser"  class="form-horizontal" method="post" action="process_form2.php" role="form">
                <div class="row" id="groupcontainer">
                    <div class="form-group">
                        <label for="req-Username"><span><i class="glyphicon glyphicon-user"></i></span>&nbsp;Username *</label>
                        <input id="req-Username" type="text" name="req-Username" class="form-control" minlength="6" placeholder="Please enter a Username minimum length 6, letters and numbers only *" required="required" data-error="Username is required." value="">
                        <div class="help-block with-errors"></div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

这是对 css 密码的最后一次尝试。

        #pg7 .row .col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3  #newUser.form-horizontal {
            border: 2px solid magenta;
            padding: 40px;
            border-radius: 5px;
        }

以下是 chrome 当我关注表单元素时检查器窗格底部显示的内容： 没有引号。

Blockquote

"html body #pg7 div.row div.col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3 form#newUser.form-horizontal div#groupcontainer.row div.formgroup"

如果需要，我可以提供 chrome 检查器窗格的屏幕截图。

Answer 1

试试这个：

  .form-horizontal {
        border: 2px solid magenta;
        padding: 40px;
        border-radius: 5px;
    }

另外 class 选择器应该以 (.) 点开头。并且不要在组合 class 之间给出 space。