在 css 上設置 div 類的樣式
[英]styling div classes on css
問題描述
我正在學習盒子模型，所以我創建了三個 div 類並為它們設置了樣式，但樣式后沒有任何改變。 除非它有一個子元素，比如p標簽、 h1標簽等，否則你不能為 div 類設置樣式嗎？ 我嘗試為普通 div 設置樣式，它只適用於這個 div 類……這是代碼；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: grey;
}
.1{
background-color:green;
width: 250px;
margin:auto;
}
.2{
background-color: yellow;
}
</style>
</head>
<body>
<div class="1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sint inventore, provident neque, dolore saepe asperiores dolorum laborum alias exercitationem molestiae repellat necessitatibus at in dolorem tenetur blanditiis. Doloremque, id!</div>
<div class="2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus illo, accusantium! Optio quisquam incidunt odio repellat, quis illum officia suscipit pariatur quasi ullam. Voluptatibus perspiciatis in nihil vero reprehenderit corporis.</div>
<div class="3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor voluptate voluptas molestiae nesciunt et illo nobis atque quasi blanditiis quas nihil veniam qui debitis, mollitia sapiente eos animi cupiditate.</div>
</body>
</html>
3 個解決方案
解決方案1
1 2016-05-12 13:38:59
類不能以數字開頭，這就是您的樣式不起作用的原因。
.one{
background-color:green;
width: 250px;
margin:auto;
}
<div class="one">Hello World!</div>
解決方案2
0 2016-05-12 13:40:54
您好，我認為您的班級名稱有問題，您無法僅將班級名稱設置為數字，請更改班級名稱，嘗試使用下面的代碼，它會對您有所幫助。
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: grey;
}
.div1{
background-color:green;
width: 250px;
margin:auto;
}
.div2{
background-color: yellow;
}
</style>
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sint inventore, provident neque, dolore saepe asperiores dolorum laborum alias exercitationem molestiae repellat necessitatibus at in dolorem tenetur blanditiis. Doloremque, id!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus illo, accusantium! Optio quisquam incidunt odio repellat, quis illum officia suscipit pariatur quasi ullam. Voluptatibus perspiciatis in nihil vero reprehenderit corporis.</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor voluptate voluptas molestiae nesciunt et illo nobis atque quasi blanditiis quas nihil veniam qui debitis, mollitia sapiente eos animi cupiditate.</div>
解決方案3
0 2016-05-12 13:44:24
類名必須以字母開頭。 但是，某些瀏覽器可能會錯誤地支持它們。
“在 CSS3 中，標識符（包括元素名稱、類和選擇器中的 ID（參見 [SELECT] [或者這是否仍然正確]））只能包含字符 [A-Za-z0-9] 和 ISO 10646 字符 161 和更高，加上連字符 (-) 和下划線 (_)；它們不能以數字開頭或連字符后跟數字。它們還可以包含轉義字符和任何 ISO 10646 字符作為數字代碼（請參閱下一項）。例如，標識符“B&W?”可以寫成“B\\&W\\?”或“B\\26 W\\3F”。（參見[UNICODE310]和[ISO10646]。）”
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{
background-color: grey;
}
.div1{
background-color:green;
width: 250px;
margin:auto;
}
.div2{
background-color: yellow;
}
</style>
<div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates sint inventore, provident neque, dolore saepe asperiores dolorum laborum alias exercitationem molestiae repellat necessitatibus at in dolorem tenetur blanditiis. Doloremque, id!</div>
<div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus illo, accusantium! Optio quisquam incidunt odio repellat, quis illum officia suscipit pariatur quasi ullam. Voluptatibus perspiciatis in nihil vero reprehenderit corporis.</div>
<div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab dolor voluptate voluptas molestiae nesciunt et illo nobis atque quasi blanditiis quas nihil veniam qui debitis, mollitia sapiente eos animi cupiditate.</div>
CSS Div＆Classs樣式優先級
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.