Question

我有工作代码，直到我尝试将style.css页面仅应用于index.html文件上的某个div。这是我目前的代码：http://codepen.io/anon/pen/LEXxeM

我所做的一切（使其停止工作）完全将style.css页面包装在＆＃34; adder {}＆＃34;中，并将所有代码放在div标签中。

关于为什么这是一个不正确的步骤的任何想法？

如果无法访问codepen，下面是代码。

HTML：

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>
        <link type="text/css" rel="stylesheet" href="css/styleok.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="js/init.js"></script>





    </head>



   <body>


        <div class="adder">
        <div id="container">
            <header>
                 <h1>Task ListO</h1>
              <a href="#" id="clear">Clear all</a>

            </header>

            <section id="taskIOSection">
                    <div id="formContainer">
                    <form id="taskEntryForm">
                        <input id="taskInput" placeholder="Add your interests here..." />
                    </form>
                </div>
                <ul id="taskList"></ul>
            </section>
        </div>
        </div>






    </body>
</html>

CSS

    @import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);


    adder {

     * {
        padding:0;
        margin:0;
    }
    body {
      background:url('');
        background-color:#2a2a2a;
        font-family:'Open Sans', sans-serif;
    }
    #container {
        background-color: #111216;
        color:#999999;
        width:350px;
        margin: 50px auto auto auto;
        padding-bottom:12px;
    }
    #formContainer {
        padding-top:12px
    }
    #taskIOSection {
    }
    #taskInput {

        font-size:14px;
        font-family:'Open Sans', sans-serif;
        height:36px;
        width:311px;
        border-radius:100px;
        background-color:#202023;
        border:0;
        color:#fff;
        display:block;
        padding-left:15px;
       -webkit-transition: all 0.30s ease-in-out;
      -moz-transition: all 0.30s ease-in-out;
      -ms-transition: all 0.30s ease-in-out;
      -o-transition: all 0.30s ease-in-out;
    }
    #taskInput:focus{
      box-shadow: 0px 0px 1pt 1pt #999999;
     background-color:#111216; 
      outline:none;
    }
    ::-webkit-input-placeholder {
        color: #333333;
        font-style:italic;
        /* padding-left:10px; */
    }
    :-moz-placeholder {
        /* Firefox 18- */
        color: #333333;
        font-style:italic;
    }
    ::-moz-placeholder {
        /* Firefox 19+ */
        color: #333333;
        font-style:italic;
    }
    :-ms-input-placeholder {
        color: #333333;
        font-style:italic;
    }
    header {
        margin-top:0;
        background-color:#F94D50;
    width:338px;
    height:48px;
    padding-left:12px;
}
header h1 {
    font-size:25px;
    font-weight:300;
    color:#fff;
    line-height:48px;
  width:50%;
  display:inline;
}
header a{

  width:40%;
  display:inline;
  line-height:48px;
}
#taskEntryForm {
    background-color:#111216;
    width:326px;
    height: 48px;
    border-width:0px;
    padding: 0px 12px 0px 12px;
    font-size:0px;
}
#taskList {
    width: 350px;
    margin:auto;
    font-size:16px;
    font-weight:600;
}
ul li {
    background-color:#17181D;
    height:48px;
    width:314px;
    padding-left:12px;
    margin:0 auto 10px auto;
    line-height:48px;
    list-style:none;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}    

}

JS：

  $(document).ready(function () {
                        var i = 0;
                        for (i = 0; i < localStorage.length; i++) {
                            var taskID = "task-" + i;
     $('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
                        }
                        $('#clear').click(function () {
                            localStorage.clear();
                        });
                        $('#taskEntryForm').submit(function () {
                            if ($('#taskInput').val() !== "") {
                                var taskID = "task-" + i;
                                var taskMessage = $('#taskInput').val();
                                localStorage.setItem(taskID, taskMessage);
    $('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
                                var task = $('#' + taskID);
                                task.css('display', 'none');
                                task.slideDown();
                                $('#taskInput').val("");
                                i++;
                            }
                            return false;
                        });

                        $('#taskList').on("click", "li", function (event) {
                            self = $(this);
                            taskID = self.attr('id');
                            localStorage.removeItem(taskID);
                            self.slideUp('slow', function () {
                                self.remove();
                            });

                        });


                    });

谢谢。

Answer 1

通常对于这些关闭或不同的页面，我会考虑直接将样式类添加到body标签，而不是将所有内容包装在另外的div中，因为它不用于语义目的，它实际上仅用于样式。

<body class="adder">
  <div id="container">
    <!-- other code -->
  </code>
</body>

然后在同一样式表中为自定义样式页面添加一些特定样式。这些需要在原始定义之后声明为。

/* adder overrides */ .adder #container { background-color: #0094FF; } .adder header { background-color:#00FF7F; } .adder #taskEntryForm { background-color:#0043FF; }

由于样式.adder #container在此实例中更具体，因此将应用此内容。它是一组复合样式，因此首先应用stlye #container，然后.adder #container中的样式将覆盖此类中特定的任何内容。

如果您使用的是谷歌浏览器，请按F12，您可以在“元素”选项卡中看到样式链（以及在该窗口中更改它们以进行学习/演示）

Demo on CodePen

Answer 2

您的CSS语法不正确。除非您在SASS工作，否则就可以了。删除加法器。

我也认为在这个加法器类中包装你的CSS没有意义吗？它没有添加任何HTML / CSS明智之举。如果你解释一下你实际想要实现的目标，那么也许我们可以提供更多帮助。

Answer 3

下面是一个使用css的简单示例。

#outer{
  background-color:grey;
  height:100px;
  width:100px;
}
#inner{
border:1px solid green;
  width:100px;
  height:100px;
  margin:10px;
}

#outer > #inner{
  color:red;
  line-height:100px;
  text-align:center;
  margin:0;
}

<div id="outer">
   <div id="inner">
     Hello
   </div>
</div>
<div id="inner">
  Hi
</div>

我有一个带有id外部的div和两个带有id内部的div，其中一个位于外部div中，另一个位于外部div之外。

外部div内部div的css写在#outer > #inner{}

中

并且带有id - inner的div的css写在#inner{}

中

我为内部div提供了10 px的余量，但是不适用于外部div内的那个。

发生这种情况是因为#outer > #inner{}内的代码覆盖了#inner{}内的代码

你可以使用'＃'基于id定位css，或使用'。'定位css。或html元素或Pseudo-class。

您可以在link

中获得css的完整参考

如何将样式仅应用于HTML中的一个div？

3 个答案: