Question

代码已经编写，没有每个类都有父级。 :(现在整个页面都是一堆部分。类可能有任意数量的部分，每个部分内有任意数量的文章。他们确定每个类都是一个类别，这就是为什么有些类有很多部分。我需要每个类/类别只有左边和上边框。所以每个类别中的所有部分都用不同的颜色组合在一起。所以除了我写更多的html并给每个类别自己的div父，我试图使用CSS选择器抓住每个班级的第一部分。

jsfiddle已启动代码，但还有更多代码。

<section class="a">
  <article>class a article one section one</article>
  <article>class a article two section one</article>
</section>
<section class="a">
  <article>class a article one of section 2</article>
</section>
<section class="b">...

我想在每个开始新课程的部分上方设置一个border-top。所以类“a”的第一部分只有一个红色的顶部边框，b类的第一部分将有一个蓝色的边框，依此类推。我添加了一个名为top的类，并将其插入到我需要的部分中，但有更好的方法吗？

css starts here
.a{border-left:solid red;}
.a.top{border-top:solid red;}
.b{border-left:solid green;}
.b.top{border-top:solid green;}
.c ...
....all the way to class z+

我尝试使用css4 - 但浏览器尚未使用它。

:nth-match(1 of section.a{border-top:solid red;}

我有很多部分尚未开始，这就是为什么我希望有更快的方法。不排除Jquery，还没考虑过。

Answer 1

如果您使用类似＆＃34; class =＆＃39; a＆＃39;＆＃34;对于所有部分，您只需使用

.a{border-left:solid blue;border-top:solid blue;}

如果没有，你可以尝试使用jQuery，获取所有部分并放入css

var sections = $('section');
$.each(sections, function(index, section){
    $(section).css('color', 'red');
});

编辑：如果你想要不同的颜色你可以有一些颜色的数组，并在你输入颜色属性之前通过一些计算来改变它们（例如＆＃39; red＆＃39;）

Answer 2

不可能，因为所有CSS选择器都选择了类型元素。

不幸的是，没有类似于一流的选择器或类似的选择器。所有css选择器的链接：http://www.w3schools.com/cssref/css_selectors.asp

您可以使用[attribute = value]，但它的唯一目的是检查天气第一部分是否具有提供值的属性。

您必须使用javascript或您正在使用的任何其他语言来选择您想要的方式（按类型的第一类）

如何用css选择每个类的第一个元素

2 个答案: