Question

我正在创建自己的网站，但遇到了一个奇怪问题。

我在问这个问题时正在使用CSS和HTML（分别在我的网络上）；我正在使用开发人员版本的Mozilla Firefox 66（只是有一些其他Web工具等）

因此，我有一个index.html和index.css，在index.html中它链接到index.css <link rel="stylesheet" href="./css/index.css" type="text/css">。

一切正常，直到我决定自定义提交按钮：

<input type="submit" id="submit" value="Register!">

基本上，我像往常一样将其放在CSS（index.css）中：

#submit{
    display: block;
    font-size: 30px;
    width: 600px;
    height: 60px;
}

问题是。这不会任何方式不影响。奇怪的是，如果我这样做了：

    #registerName, #registerMail, #registerPass, #submit{
    display: block;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
    width: 600px;
    height: 60px;
};

这将影响按钮（以及自然的registerName等）。我想，这到底是什么？

因此，在这里查找之后（当然是StackOwerflow ：）），我发现人们在做一些方法，例如将其直接放入按钮（<input type="submit" value="Register!" style="width:600px;height:60px;"）是可行的，但不是我想要的，还有类似的东西input.submit（如果我将id替换为class）无效。我不知道。这似乎是一个奇怪的错误或什么。

因此，总而言之：当我在CSS中简单地执行#submit {}时，它实际上不会影响提交ID。尽管如果提及更多内容（例如＃submit，＃user，＃phone {}），它的确会影响它。这是错误还是什么？

PS：很长的帖子，很抱歉，我是新来的，我想向您详细解释以便理解

Answer 1

如果您显示给我们的CSS样式表如下所示，则为“;”在第一个声明块将导致第二个选择器和声明块失败之后。

#registerName, #registerMail, #registerPass, #submit{
 display: block;
 margin-left: auto;
 margin-right: auto;
 font-size: 30px;
 width: 600px;
 height: 60px;
};

#submit{
 display: block;
 font-size: 30px;
 width: 600px;
 height: 60px;
}

Answer 2

使用button代替input。

#submit {
    display: block;
    font-size: 30px;
    width: 600px;
    height: 60px;
}

<button type="submit" id="submit">Register!</button>

为什么它可以用于组样式？如果没有整个CSS，很难说。我最好的猜测是在两者之间应用了其他内容，例如边框。例如，您可以通过为border属性设置任何有效值来使CSS与input一起使用。

#submit {
    display: block;
    font-size: 30px;
    width: 600px;
    height: 60px;
    border: 1px solid lightgrey;
}

<input type="submit" id="submit" value="Register!"></input>

无法设置“提交”按钮的样式

2 个答案: