html - 如何在 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 的检查器 Pane 的最底部显示的内容: 没有引号。

Blockquote

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

如果需要，我可以提供 Chrome 检查器面板的屏幕截图。

Answer 1

试试这个:

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

此外，类选择器应该以 (.) 点开头。并且不要在组合类之间留出空间。