javascript 如何将样式仅应用于 HTML 中的一个 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29074321/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you apply a style to only one div in the HTML?
提问by Sherri
I had working code until I tried to make the style.css page apply only to a certain div on the index.html file. This is the current code I have: http://codepen.io/anon/pen/LEXxeM
在我尝试使 style.css 页面仅应用于 index.html 文件上的某个 div 之前，我有工作代码。这是我当前的代码：http: //codepen.io/anon/pen/LEXxeM
All that I did (which made it stop working) was completely wrap the style.css page in "adder { }", and put all the code in the body in a div tag.
我所做的一切（让它停止工作）就是将 style.css 页面完全包装在“adder { }”中，并将主体中的所有代码放在一个 div 标签中。
Any ideas as to why this was an incorrect step?
关于为什么这是一个不正确的步骤的任何想法？
In case codepen can't be accessed, below is the code.
如果无法访问 codepen，下面是代码。
HTML:
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
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:
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();
});
});
});
Thank you.
谢谢你。
采纳答案by jammykam
Normally for these one off or different pages I would consider adding a style class directly to the body tag, rather than wrapping all the content in an additional div, since it serves no semantic purposes and it is really for styling only purposes.
通常对于这些单独的或不同的页面，我会考虑将样式类直接添加到 body 标签中，而不是将所有内容包装在一个额外的 div 中，因为它没有语义目的，它实际上仅用于样式目的。
<body class="adder">
<div id="container">
<!-- other code -->
</code>
</body>
Then add some specific styles for your custom styles pages in the same stylesheet. These need to be declared afterthe original definition.
然后在同一样式表中为您的自定义样式页面添加一些特定样式。这些需要在原始定义之后声明。
/* adder overrides */
.adder #container {
background-color: #0094FF;
}
.adder header {
background-color:#00FF7F;
}
.adder #taskEntryForm {
background-color:#0043FF;
}
Since the style .adder #containeris more specific in this instance this is what will get applied. It's a compound set of styles, so first the stlye #containerwill be applied and then the styles from .adder #containerwill override anything that is specific in this class.
由于样式.adder #container在这种情况下更具体，因此将应用此样式。这是一组复合样式，因此首先#container将应用stlye ，然后来自的样式.adder #container将覆盖该类中特定的任何内容。
If you are using Google Chrome then press F12 and you can see the the style chain in the Elements tab (as well as change them in that window for learning/demo purposes)
如果您使用的是 Google Chrome，则按 F12，您可以在 Elements 选项卡中看到样式链（以及在该窗口中更改它们以进行学习/演示）
回答by Joe Corby
your CSS syntax is incorrect. Unless you were working with SASS in which case it would be ok. Remove adder.
您的 CSS 语法不正确。除非您使用 SASS，否则就可以了。删除加法器。
I also see no point to wrapping your CSS in this adder class? It add's nothing HTML/CSS wise. If you explain what you're actually trying to achieve then maybe we can assist a bit more.
我也认为将 CSS 包装在这个加法器类中没有意义？它添加了任何 HTML/CSS 明智。如果您解释一下您实际想要实现的目标，那么也许我们可以提供更多帮助。
回答by avnaveen
Below is a simple example of using css.
下面是一个简单的使用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>I have a div with an id outer and two divs with an id inner out of which one is inside the outer div and the other is outside the outer div.
我有一个 id 为外的 div 和两个 id 为内的 div，其中一个在外 div 内，另一个在外 div 外。
The css for inner div which is inside the outer div is written inside #outer > #inner{}
外层div里面的内层div的css写在里面 #outer > #inner{}
and the css for both div with an id - inner is written inside #inner{}
并且带有 id 的两个 div 的 css - 内部都写在里面 #inner{}
I have given a margin of 10 px for inner div but that isn't applied for the one which is inside the outer div.
我为内部 div 提供了 10 px 的边距，但这不适用于外部 div 内的边距。
this happened because the code which is inside #outer > #inner{}is overriding the code which is inside #inner{}
这是因为里面#outer > #inner{}的代码覆盖了里面的代码#inner{}
You can target a css based on id using '#' or class using '.' or html elements or Pseudo-class.
您可以使用 '#' 根据 id 或使用 '.' 的类来定位 css。或 html 元素或伪类。
you can get a complete reference for css in this link
您可以在此链接中获得 css 的完整参考
