CSS规则不起作用
问题描述:
嗨我想学习CSS。但对于我的页面,使用的样式不起作用。下面显示了我使用的脚本。有人可以让我知道我所做的问题。CSS规则不起作用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
<style type="text/css">
button{
.big{
font-size:8px;
}
.small{
font-size:8px;
}
#green{
color:green;
}
}
</style>
</head>
<body>
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
</body>
</html>
答
您已经在按钮{}这是不需要的,不正确的语法包围的整个CSS。从CSS中删除外部按钮{}。希望它有帮助
答
您可以删除样式标签中的按钮。也删除相应的括号。所以你应该在style标签中留下下面的代码。
.big{
font-size:8px;
}
.small{
font-size:8px;
}
#green{
color:green;
}
答
试试这个:
.big, .small {
font-size:8px;
}
#green{
color:green;
}
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
+0
您在代码中做了两处更改 - 其中一条可能不是意图的(将“.big”和“.small”的规则组合在一起) - 当前字体大小似乎只是概念证明),另一个是实际错误。如果你指出语法错误,你的答案会更好 - 将规则封装在一个'button {}'块中。 – Pharaoh
答
试试这个:
.big{
font-size:8px;
}
.small{
font-size:8px;
}
#green{
color:green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>
</body>
</html>
代码转储不是很好的答案。给它添加一些解释 –
对不起。我是新来的。 – LearnHey
现在让我编辑它。 – LearnHey