[英]How do you apply a style to only one div in the HTML?
在我嘗試使 style.css 頁面僅適用於 index.html 文件上的某個 div 之前，我有工作代碼。 這是我當前的代碼： http : //codepen.io/anon/pen/LEXxeM
我所做的一切（讓它停止工作）就是將 style.css 頁面完全包裝在“adder { }”中，並將主體中的所有代碼放在一個 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();
});
});
});
謝謝你。
通常對於這些單獨的或不同的頁面，我會考慮直接向 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將覆蓋任何特定這一類。
如果您使用的是 Google Chrome，則按 F12，您可以在 Elements 選項卡中看到樣式鏈（以及在該窗口中更改它們以進行學習/演示）
您的 CSS 語法不正確。 除非您正在使用 SASS，否則就可以了。 刪除加法器。
我也認為在這個加法器類中包裝 CSS 沒有意義？ 它添加了任何 HTML/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>
我有一個 id 為外的 div 和兩個 id 為內的 div，其中一個在外 div 內，另一個在外 div 外。
外層 div 內的內層 div 的 css 寫在#outer > #inner{}
和帶有 id 的兩個 div 的 css #inner{}寫在#inner{}
我為內部 div 提供了 10 px 的邊距，但這不適用於外部 div 內的邊距。
發生這種情況是因為#outer > #inner{}內部的代碼覆蓋了#inner{}內部的代碼
您可以使用 '#' 根據 id 或使用 '.' 的類來定位 css。 或 html 元素或偽類。
您可以在此鏈接中獲得 css 的完整參考
如何在jQuery中將樣式動態應用於元素，類型和類？
[英]How do you dynamically apply style to an element, type and class in jQuery?
當外部容器尺寸增加時，如何使div僅在一個方向上延伸？
[英]How do you make a div only extend in one direction when the outer container size increases?
你如何用 HTML 制作一個只有一個正確用戶名和一個密碼的登錄頁面屏幕？
[英]How do you make a login page screen with HTML which only has one correct username and one password?
如何在不破壞javascript的情況下使用Jquery將html從一個div移動到另一個div
[英]How do you move html from one div to another with Jquery without breaking javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.