Question

我正在学习盒子模型，所以我创建了三个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>

Answer 1

班级不能以数字开头，这就是为什么你的风格不起作用。

.one{
    background-color:green;  
    width: 250px; 
    margin:auto;
}

<div class="one">Hello World!</div>

Answer 2

您好我认为您的班级名称有问题您不能只设置您的班级名称数字请更改班级名称尝试下面的代码它会帮助您。

<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>

Answer 3

类名必须以字母开头。但是，有些浏览器可能会错误地支持它们。

来自CSS Synatx module level

“在CSS3中，标识符（包括元素名称，类和ID）选择器（见[SELECT] [或这仍然是]））只能包含字符[A-Za-z0-9]和ISO 10646字符161和更高，加上连字符（ - ）和下划线（_）;他们不能以数字开头或连字符后跟数字。他们还可以包含转义字符和任何ISO 10646字符作为数字代码（请参阅下一个项目）。例如，标识符“B＆amp; W？”可以写成“B \＆amp; 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

3 个答案: