使用CSS仅定位其中一个按钮

Question

这是一个2部分的问题，第一个问题是如何仅在我的两个按钮之一上更改设计？我有两个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"} 

不会改变另一个。问题是什么？

我的第二个问题是，如何在第二个按钮的最左侧放置一个小的重放＆＃34; -icon？我试过这个：

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)选择第二个按钮时应该小心。我说这是因为nth-child(2)伪类选择了父 下的 第二个子元素而不是 第二个按钮元素在父母 下。

现在你问我两者有什么区别。答案是对于问题中提供的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)不起作用（即第二个按钮）不再是风格）。这是因为在这两种情况下，父项下的第二个子元素不是第二个按钮。其中一个是<br>，另一个是<label>元素。

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>

在上述两种情况下，last-child选择器都会选择第二个按钮，因为第二个按钮是其父项下的最后一个子项。但即使是那个选择器也无法适用于所有情况，因为如果在第二个按钮之后还有另一个元素呢？所以这也不是万无一失的。

那么什么选择器更好？ nth-of-type选择器更合适（但仍然不是最佳选择，我会在一段时间内完成），因为在父 <下选择特定类型的 第n个元素/ strong>并且不受其他元素的影响。因此，正如您在下面代码段中的前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>

如果它可以工作并选择第二个按钮那么为什么它不是最好的？它不是最好的，因为input元素可以是多种类型，但元素类型对于所有元素都是相同的。所以第二个input可能并不总是第二个按钮。请参阅上面代码段中的第4组，看看我的意思。

上面指出的同一组问题也适用于first-child选择器。

因此，除非您尝试根据特定模式选择一组元素，否则最好避免使用nth-child，nth-of-type选择器。始终使用其值已定义（并且不会更改）的属性来选择元素。属性可以是元素（或）id（或）类的name。这些选择器永远不会受到HTML结构更改的影响（比如在所需元素之间或之前或之后引入额外元素，按元素顺序更改等）。

在您的情况下，这两个按钮都有一个唯一的name，因此您可以使用[name='value'] selector安全地选择每个按钮。如果您可以在两个按钮上添加id，那么使用它（如#id）会更安全。以下是这些选择器的演示。

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>

  

我的第二个问题是，如何在第二个按钮的最左侧放置一个小的“重播”图标？

这很可能与您的图片位置有关，因为您可以在上面的代码段中看到，代码运行正常。

注意：这不是试图挑剔或发现smerny评论的错误。我只想告诉你解决这个问题的最佳方式（在我看来）（特别是因为你已经说过你刚刚开始使用CSS）。此答案中提供的所有信息都已存在于Stack Overflow中，但分散在多个主题中。希望您觉得这个答案有用：）