CSS Class Nth Child 选择器答案

【问题标题】：CSS Class Nth Child selectorCSS Class Nth Child 选择器
【发布时间】：2012-09-26 01:18:19
【问题描述】：

这是我的代码：fiddle

我不明白我做错了什么。我发现在这一行：

<label>City<font color="red">*</font>: <input type="text" name="city" id="city" /></label><br/>

如果你删除：

</label><br/>

由于某种原因，它有效。我不知道为什么。任何想法我做错了什么？谢谢

编辑：对不起，忘了提到什么有效。我希望第一个和第二个提交按钮的样式不同。因此，对于第二个表单上的提交按钮，我使用了 nth-child 选择器，但由于某种原因，它没有对第二个提交按钮应用正确的样式更改。就像我说的，如果你出于某种原因删除了上面的部分，它会起作用。

【问题讨论】：

您可能想解释一下您要做什么。 “它不起作用”也不能准确描述问题所在。
字体标签？！我认为人文学科的希望刚刚消亡。 w3schools.com/tags/tag_font.asp
您使用的是哪种文档类型？ font 在 HTML4 中已弃用。 src
我没有看到:nth-child() 选择器。我只看到一个 :nth-of-type() 选择器，它的工作方式不同。
确保所有标签都已关闭。如果你删除了一个结束标签并且它起作用了，那可能是因为某处有一个未闭合的打开标签，或者是一个额外的结束标签。

标签： jquery html css forms css-selectors

【解决方案1】：

你做错了很多事情，但重要的是：

标签元素最多可以包含一个输入、按钮、选择、 textarea 或 keygen 后代。

您有一个包含两个输入的标签（名字 + 姓氏）。

你也不应该使用字体标签，CSS是有原因的。

第n个孩子的问题：

这个伪类根据元素在父元素的子元素列表中的位置来匹配元素。

参考：http://reference.sitepoint.com/css/pseudoclass-nthchild

使用不同的类或 ID，最简单的方法。

【讨论】：

【解决方案2】：

CSS 代码：div.box .button:nth-of-type(2)

没有元素 div.box .button:nth-of-type(2) 它是 div.box .button:nth-of-type(1) 。如需更多参考，请访问以下链接http://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/。

【讨论】：

【解决方案3】：

你为什么不给按钮不同的类，因为它让你的生活更轻松.. 首先使用简单的选择器。如果这不起作用，那就去其他人吧。。

接下来不要使用字体标签..用一个跨度替换它并给它一个带有红色字体的错误类..

input[type="submit"]
{
    padding:4px 7px;
    background:#CC0000;
    border:0px;
    position:relative;
    top:0px;
    border-bottom: 1px double #660000;
    border-top: 1px double #660000;
    border-left:1px double #FF0033;
    border-right:1px double #FF0033;
}

.button1
{
    margin:0 0 10px 0;
    color: #FFF;
    left:0px;
    width:100px;
}

.button2
{
    margin:0 0 5px 0;
    color: #00F;
    left:50px;
    width:150px;

}

.error
{
    color: red;
}

我把所有的通用属性放在一个类中。然后按钮 1 和按钮 2 将具有按钮的特定属性。这使您的代码更清晰，因为您的文档中没有任何重复的样式。检查这个FIDDLE

【讨论】：