Question

我正在尝试将CSS添加到格式与其余格式不同的表单中，但是，如果添加单独的style.css文件，则该CSS适用于不需要的整个网站。我需要在输入字段，标签和按钮之间添加空格。我不确定哪个CSS文件被覆盖，因为我大约有20个。有什么方法可以覆盖它并将其应用于“ box-body”类

<!-- To Do List -->
        <div class="col-lg-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">To Do List</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data- 
                        widget="collapse"><i class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data- 
                        widget="remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>

                <div class="box-body">

            <!-- <link href='https://fonts.googleapis.com/css? 
               family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->

            <p>
                <label for="new-task">Add Item</label><input id="new-task" 
            type="text"><button>Add</button>
            </p>

            <h3>To Do</h3>
            <ul id="incomplete-tasks">
                <li><input type="checkbox"><label>Pay Bills</label><input 
                type="text"><button class="edit">Edit</button><button 
                class="delete">Delete</button></li>
                <li class="editMode"><input type="checkbox"><label>Go 
                  Shopping</label><input type="text" value="Go Shopping"> 
                  <button class="edit">Edit</button><button 
                   class="delete">Delete</button></li>

               </ul>

                <h3>Completed</h3>
                <ul id="completed-tasks">
                <li><input type="checkbox" checked><label>See the 
                Doctor</label><input type="text"><button 
               class="edit">Edit</button>
            <button class="delete">Delete</button></li>
            </ul>

            <script type="text/javascript" src="app.js"></script>
            <script  src="js/index.js"></script>
        </div>
        </div>

    </div>
    <!-- /.container-fluid -->



     </section>
      <!-- /.content -->
         </div>
            <!-- /.content-wrapper -->

我目前拥有的是：currently

盒子的外观应为：should look like

 /* To do List CSS*/

.containerToDo {
display: block;
width: 400px;
margin: 100px auto 0;
}

.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}

ul {
margin: 0;
padding: 0;
}

li * {
float: left;
}

li, h3 {
clear:both;
list-style:none;
}

input, button {
outline: none;
}

button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}

button:hover {
color: #333;
}

/* Heading */

h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 10px;
text-transform: uppercase;
}

input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}

input[type="text"]:focus {
color: #333;
}

/* New Task */

label[for='new-task'] {
display: block;
margin: 0 0 20px;
}

input#new-task {
float: left;
 width: 318px;
}

p > button:hover {
color: #0FC57C;
}

/* Task list */

li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}

li > input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}

li > label {
font-size: 18px;
line-height: 40px;
width: 237px;
padding: 0 0 0 11px;
}

li >  input[type="text"] {
width: 226px;
}

li > .delete:hover {
color: #CF2323;
}

/* Completed */

#completed-tasks label {
text-decoration: line-through;
color: #888;
}

/* Edit Task */
ul li input[type=text] {
display:none;
}

ul li.editMode input[type=text] {
display:block;
}

ul li.editMode label {
display:none;
}

.input#new-task{
margin-left: 20px;
padding:20px;

Answer 1

对于每个选择器，.box-body都像.box-body button一样。

Answer 2

您可以做这样的事情，使用顶部的.box-body div和样式创建一个单独的html文件。该文件将是这样的（这只是一个大概的想法），

<style>

.box-body {
background: #fff;
color: #333;
font-family: Lato, sans-serif;
}

</style>

<div class="box-body">

           <link href='https://fonts.googleapis.com/css? 
               family=Lato:300,400,700' rel='stylesheet' type='text/css'> ->

            <p>
                <label for="new-task">Add Item</label><input id="new-task" 
            type="text"><button>Add</button>
            </p>

            <script type="text/javascript" src="app.js"></script>
            <script  src="js/index.js"></script>

</div>

比方说文件名是box-body.html。进入主页并删除.box-body div并添加它，

<div id="box-body"></div>

然后将其添加到主代码底部</body>之前

<script>
      $('#box-body').load('./box-body.html');
</script>

将CSS应用于单个元素，类不起作用

2 个答案: