Question

嗨，我正在努力学习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>

Answer 1

试试这个：

.big, .small {
    font-size:8px;
}

#green{
     color:green;
}

<button class="big">Button 1</button>
<button id="green" class="small">Button 2</button>

Answer 2

您已将整个CSS包含在按钮{}中，这不是必需的，也不是正确的语法。从CSS中删除外部按钮{}。希望它有所帮助

Answer 3

您可以删除样式标记中的按钮。同时删除相应的括号。因此，您应该在样式标记中留下以下代码。

    .big{
        font-size:8px;
    }


    .small{
        font-size:8px;
    }

    #green{
        color:green;
    }

Answer 4

试试这个：

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

CSS规则不起作用

4 个答案: