第一个元素与类的CSSselect器
我有一堆red类名的元素：
<p class="red"></p> <div class="red"></div>
我似乎无法使用下面的CSS规则selectclass="red"的第一个元素：
.red:first-child{ border:5px solid red; }
这个select器有什么问题，我该如何纠正？
更新 ：
感谢评论，我发现这个元素必须是它的父类的第一个孩子，而不是我所拥有的。 我有以下结构：
<div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
这个规则在评论中提到失败：
.home .red:first-child{ border:1px solid red; }
我怎样才能把第一个孩子的目标定为red ？
这是最着名的作家之一误解如何:first-child作品。 在CSS2中引入 :first-child伪类代表其父亲的第一个孩子 。 而已。 有一个非常普遍的误解，认为它select哪个子元素是第一个匹配其余的复合select器指定的条件。 由于select器的工作方式（见这里的解释），这是不正确的。
select器级别3引入了:first-of-type伪类 ，它表示元素types的同胞中的第一个元素。 这个答案用插图解释了:first-child和:first-of-type :first-child之间的区别。 但是，与:first-child ，它没有考虑任何其他条件或属性。 在HTML中，元素types由标签名称表示。 在这个问题中，这个types是p 。
不幸的是，没有类似的:first-of-class用于匹配给定类的第一个子元素的第一:first-of-class伪类。 Lea Verou和我为此提出的一个解决方法（尽pipe完全独立）是首先将所需的样式应用于所有与该类的元素：
/* * Select all .red children of .home, including the first one, * and give them a border. */ .home > .red { border: 1px solid red; }
…然后在一个覆盖规则中使用一般的同胞组合器~ 来 “撤销”具有第一个类之后的类的元素的样式：
/* * Select all but the first .red child of .home, * and remove the border from the previous rule. */ .home > .red ~ .red { border: none; }
现在只有class="red"的第一个元素会有一个边框。
以下是如何应用这些规则的说明：
<div class="home"> <span>blah</span> <!-- [1] --> <p class="red">first</p> <!-- [2] --> <p class="red">second</p> <!-- [3] --> <p class="red">third</p> <!-- [3] --> <p class="red">fourth</p> <!-- [3] --> </div>
-
没有规则适用; 没有边框呈现。
这个元素没有red的类，所以它被跳过了。 -
只有第一条规则适用; 呈现红色边框。
这个元素的类是red，但是它的前面没有父类中的red元素。 因此，第二个规则不适用，只有第一个，元素保持其边界。 -
这两条规则都适用。 没有边框呈现。
这个元素有red的类。 在这之前还有至less一个red元素。 因此，这两个规则都适用，第二个border宣告优先于第一个，从而“撤销”它，可以这么说。
作为奖励，尽pipe它是在select器3中引入的，但通用兄弟组合器实际上得到了IE7的很好支持，而且更新，与IE9以前只支持的:first-of-type和:nth-of-type() 。 如果您需要良好的浏览器支持，那么您很幸运。
事实上，兄弟组合是这一技术中唯一重要的组成部分，它具有如此惊人的浏览器支持，使得这种技术非常灵活 – 除了类select器之外，还可以通过其他方式来调整它以便过滤元素：
-
你可以使用它来解决
:first-of-type在IE7和IE8中的第一种types，通过简单地提供一个typesselect器而不是一个类select器（同样，在稍后的章节中，更多的是关于其不正确的用法）：article > p { /* Apply styles to article > p:first-of-type, which may or may not be :first-child */ } article > p ~ p { /* Undo the above styles for every subsequent article > p */ } -
您可以通过属性select器或任何其他简单的select器而不是类进行过滤。
-
即使伪元素在技术上不是简单的select器，也可以将这种重写技术与伪元素结合起来。
请注意，为了这个工作，你需要事先知道你的其他兄弟元素的默认样式是什么，所以你可以覆盖第一个规则。 此外，由于这涉及到在CSS中覆盖规则，所以用单个select器无法实现与Selectors API或Selenium的CSS定位器一样的function。
值得一提的是，select器4引入了对:nth-child()符号的扩展 （最初是一个全新的伪类，称为:nth-match() ），它将允许你使用类似于:nth-child(1 of .red)代替假想的.red:first-of-class 。 作为一个相对较新的提案，它还没有足够的可互操作的实现方式在生产现场使用。 希望这会很快改变。 同时，我build议的解决方法应该适用于大多数情况。
请记住，这个答案假定问题是寻找具有给定类的每个第一个子元素。 对于整个文档中的复杂select器的第n个匹配，既没有伪类，也没有通用的CSS解决scheme – 是否存在解决scheme在很大程度上取决于文档结构。 jQuery提供了:eq() :first ， :last和more，但是请注意， 它们的function与以下方面有很大不同:nth-child()等 。 使用select器API，您可以使用document.querySelector()获取第一个匹配项：
var first = document.querySelector('.home > .red');
或者用索引器使用document.querySelectorAll()来select任何特定的匹配项：
var redElements = document.querySelectorAll('.home > .red'); var first = redElements[0]; var second = redElements[1]; // etc
尽pipe菲利普·杜布迈尔 （ Philip Daubmeier .red:nth-of-type(1)最初接受的答案（原来是由马丁写的但自此之后删除）的答案中的.red .red:nth-of-type(1)解决scheme，但其行为并不像你期望的那样。
例如，如果您只想在原始标记中selectp ：
<p class="red"></p> <div class="red"></div>
…那么你不能使用.red:first-of-type （相当于.red:nth-of-type(1) ），因为每个元素都是它的第一个（也是唯一的）types（ p和div ），所以两者都将被select器匹配。
当某个类的第一个元素也是第一个类时 ，伪类将起作用，但这只是巧合 。 菲利普的答案certificate了这一点。 当你在这个元素之前插入相同types的元素时，select器将失败。 采取更新的标记：
<div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
应用.red:first-of-type的规则可以工作，但是一旦添加了另一个没有class的p ：
<div class="home"> <span>blah</span> <p>dummy</p> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
…select器将立即失败，因为第一个.red元素现在是第二个 p元素。
第:first-childselect器的意图，就像名称所述，select父标签的第一个孩子。 孩子必须embedded在同一个父标签中。 你的确切例子将工作（只是在这里试过）：
<body> <p class="red">first</p> <div class="red">second</div> </body>
也许你已经嵌套在不同的父标签中的标签？ 你的red标签真的是父母的第一个标签吗？
还要注意的是，这不仅适用于整个文档中的第一个这样的标签，但是每当一个新的父文件被缠绕在它周围时，如：
<div> <p class="red">first</p> <div class="red">second</div> </div> <div> <p class="red">third</p> <div class="red">fourth</div> </div>
first和third将是红色的。
更新：
我不知道为什么martyn删除了他的答案，但他有解决scheme，即:nth-of-typeselect器：
<html> <head> <style type="text/css"> .red:nth-of-type(1) { border:5px solid red; } </style> </head> <body> <div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div> </body> </html>
学分马丁 。 更多信息例如在这里 。 请注意，这是一个CSS 3select器，因此不是所有的浏览器都能识别它（例如IE8或更旧的版本）。
正确的答案是：
.red:first-child, :not(.red) + .red { border:5px solid red }
第一部分：如果元素是第一个父元素，并具有类“红色”，它将得到边界。
第二部分：如果“.red”元素不是第一个给它的父元素，而是紧跟在一个没有“.red”类的元素之后，那么它也应该得到这个边界的荣誉。
小提琴或它没有发生。
Philip Daubmeier的回答虽然被接受，但并不正确 – 请看附带的小提琴。
BoltClock的答案是可行的，但不必要的定义和覆盖样式
（尤其是否则会inheritance不同的边界的问题 – 您不希望将其他边界声明为无：）
编辑：如果您有多次红色“红色”非红色，每个“第一”红色将获得边界。 为了防止这种情况，需要使用BoltClock的答案。 看小提琴
你可以使用first-of-type或者nth-of-type(1)
.red { color: green; } /* .red:nth-of-type(1) */ .red:first-of-type { color: red; }
<div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
要匹配您的select器，该元素必须具有red的类名，并且必须是其父项的第一个子项。
<div> <span class="red"> <!-- MATCH --> </div> <div> <span>Blah</span> <p class="red"> <!-- NO MATCH --> </div> <div> <span>Blah</span> <div><p class="red"></div> <!-- MATCH --> </div>
由于其他答案涵盖了什么是错的 ，我会尝试另一半，如何解决它。 不幸的是，我不知道你在这里只有一个CSS的解决scheme，至less不是我能想到的 。 还有一些其他的select，虽然….
-
在生成元素时为元素分配
first类，如下所示：<p class="red first"></p> <div class="red"></div>CSS：
.first.red { border:5px solid red; }这个CSS只匹配
first和red类的元素。 -
或者，在JavaScript中做同样的事情，例如，下面是使用与上面相同的CSS来执行此操作的jQuery：
$(".red:first").addClass("first");
根据你更新的问题
<div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
怎么样
.home span + .red{ border:1px solid red; }
这将select类家 ，然后select元素跨度 ，最后select所有在元素之后立即放置的.red元素。
参考： http : //www.w3schools.com/cssref/css_selectors.asp
你可以改变你的代码到这样的东西来得到它的工作
<div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
这为你做的工作
.home span + .red{ border:3px solid green; }
这是来自SnoopCode的CSS参考。
尝试这个 ：
.class_name > *:first-child { border: 1px solid red; }
你可以使用nth-type-type（1），但要确保该网站不需要支持IE7等，如果是这样的话，使用jQuery来添加body类，然后通过IE7 body class然后find元素名称，然后添加在第n个孩子造型。
尝试这个简单的代码为您的问题
codpen link http://codepen.io/santoshkhalse/pen/xRQYpo
.home p:first-of-type { border:5px solid red; width:100%; display:block; }
<div class="home"> <span>blah</span> <p class="red">first</p> <p class="red">second</p> <p class="red">third</p> <p class="red">fourth</p> </div>
上面的答案太复杂了。
.class：first-type {}
这将select第一类的类。
由于某种原因，上述答案似乎都没有解决父母真正的第一个也是唯一的第一个孩子的问题。
#element_id > .class_name:first-child
如果您只想将样式应用于此代码中的第一个子类，则以上所有答案都将失败。
<aside id="element_id"> Content <div class="class_name">First content that need to be styled</div> <div class="class_name"> Second content that don't need to be styled <div> <div> <div class="class_name">deep content - no style</div> <div class="class_name">deep content - no style</div> <div> <div class="class_name">deep content - no style</div> </div> </div> </div> </div> </aside>
试试这个简单而有效的
.home > span + .red{ border:1px solid red; }
我正在使用CSS下面的列表ul背景图像
<footer id="footer"> <div class="module"> <ul class="menu "><li class="level1 item308 active current"></li> <li> </li> </ul> </div> <div class="module"> <ul class="menu "><li></li> <li></li> </ul> </div> <div class="module"> <ul class="menu "><li></li> <li></li> </ul> </div>
我正在使用CSS下面的列表ul背景图像
#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){ background-position: center; background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.comhttp://img.dovov.comstories/images_monagentvoyagessuperprix/layout/icon-home.png); background-repeat: no-repeat; }
