html - 仅使用CSS定位按钮之一

Question

这是一个分为两部分的问题，第一个问题是如何改变我的两个按钮中的一个的设计？我有两个HTML中的提交按钮，编码为

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

我想在CSS中单独改变它们的设计。我试过第一个按钮使用这个（在CSS中）：

input:first-child{
    font-size: 20px;
    font-family: Tunga;
    background-color: rgb(051,103,149);
    color: white;
}

而且有效，但是

input:second-child{ "other coding stuff"} 

不能改变另一个。怎么了？
我的第二个问题是，如何在第二个按钮的最左边放置一个小的“重播”图标？我试过这个：

background-image: url('replaybutton.png');
background-position: 10px 10px; 
background-repeat: no-repeat;
padding-left: 40px;

在输入字段中，但它不显示。这里有什么问题？我很乐意回答任何可能的问题。:)

Answer 1

input:second-child{ "other coding stuff"}

不能改变另一个。。。怎么了？
smerny在现场。CSS中没有伪类，这就是它不做任何事情的原因。但在使用second-child选择第二个按钮时应小心。我之所以这么说是因为nth-child(2)伪类选择父类下的第二个子元素，而不是父类下的第二个button元素。
现在你会问我这两者有什么不同。答案是，对于问题中提供的HTML，两者没有区别。所以，正如您在下面的代码片段中看到的，选择器可以工作。

input:first-child {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input:nth-child(2) {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
}

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

但是，如果您的HTML被更改为类似下面代码片段中两个示例中的一个（这两个示例都不是不可想象的），那么您将看到nth-child(2)不起作用（也就是说，第二个按钮不再具有样式）。这是因为在这两种情况下，父元素下的第二个子元素不是第二个按钮。一个是nth-child(2)元素，另一个是<br>元素。

input:first-child {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input:nth-child(2) {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
}

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <br>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <label>Some label</label>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

在上述两种情况下，<label>选择器将选择第二个按钮，因为在这两种情况下，第二个按钮是其父项下的最后一个子项。但即使是这个选择器也不能适用于所有情况，因为如果在第二个按钮之后还有另一个元素呢？所以这也不是傻瓜的证据。
那么哪个选择器更好呢？last-child选择器更适合（但仍然不是最好的，我将在一段时间内找到），因为在父元素下的特定类型的select nth元素不受其他元素的影响。因此，正如您在下面的代码片段的前3个集合中看到的，即使按钮之间和之后还有其他元素，选择器仍然可以正常工作。

input:first-child {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input:nth-of-type(2) {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
}

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <br>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <label>Some label</label>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
  <div>Some content</div>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <input type='checkbox' name=chk /> 
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

如果它工作并选择第二个按钮，那么为什么它不是最好的呢？这并不是最好的，因为nth-of-type元素可以是多种类型，但所有元素的类型都是相同的。所以第二个按钮可能并不总是第二个。请参阅上面片段中的第4组，了解我的意思。
上述相同的问题也适用于input选择器。
因此，最好避免使用input，first-child选择器，除非您试图根据特定模式选择一组元素。始终使用其值已定义（且不会更改）的属性来选择元素。属性可以是元素（或其nth-child（或）类的nth-of-type。这些选择器永远不会受到HTML结构变化的影响（例如在所需元素之间、之前或之后引入额外元素、元素顺序变化等）。
在您的情况下，两个按钮都有一个唯一的id，因此您可以使用name selector来安全地选择每个按钮。如果您可以将name添加到两个按钮，那么使用它（如[name='value']）将更加安全。下面是这些选择器的演示。

input[name='skicka'] {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: white;
}
input[name='skicka2'] {
  font-size: 20px;
  font-family: Tunga;
  background-color: rgb(051, 103, 149);
  color: red;
  box-shadow: 0 0 2px aqua;
  background-image: url('http://lorempixel.com/20/10/nature/1');
  background-position: 10px 8px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <br>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <label>Some label</label>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
  <div>Some content</div>
</center>

<hr>

<center>
  <input type='submit' name=skicka value=BEKR&Auml;FTA&nbsp;DRAG>
  <input type='checkbox' name=chk />
  <input type='submit' name=skicka2 value=STARTA&nbsp;OM>
</center>

我的第二个问题是，如何在第二个按钮的最左边放置一个小的“重播”图标？
这很可能是图像位置的问题，因为正如您在上面的代码片段中看到的，代码工作正常。
注意：这并不是试图挑剔斯梅尼的评论，也不是试图找出问题所在。我只是想告诉你（在我看来）解决这个问题的最好方法（特别是因为你已经声明你刚刚开始使用CSS）。此答案中提供的所有信息都已存在于堆栈溢出中，但分散在多个主题中。希望你觉得这个答案有用：）