仅定位一个带有 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)选择第二个按钮时应该小心。 我这样说的原因是因为nth-child(2)伪类选择了 parent 下的第二个子元素，而不是parent 下的第二个 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)不起作用（即，第二个按钮不是更长的样式）。 这是因为在这两种情况下，父元素下的第二个子元素不是第二个按钮。 一个是<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 个元素并且不受其他元素存在的影响. 因此，正如您在以下代码段的前 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']选择器来安全地选择每个按钮。 如果您可以为两个按钮添加一个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 中，但分散在多个主题中。 希望你觉得这个答案有帮助:)