相关疑难解决方法(0)

我有一堆带有类名的元素red,但我似乎无法class="red"使用以下CSS规则选择第一个元素:

.red:first-child {
    border: 5px solid red;
}

<p class="red"></p>
<div class="red"></div>

这个选择器有什么问题,我该如何纠正？

感谢这些评论,我发现该元素必须是其父母的第一个孩子才能被选中,这与我的情况不同.我有以下结构,这条规则失败,如评论中所述:

.home .red:first-child {
    border: 1px solid 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>

我怎样才能让第一个孩子上课red？

是否可以使用CSS3选择器:first-of-type选择具有给定类名的第一个元素？我的测试没有成功,所以我认为不是吗？

守则(http://jsfiddle.net/YWY4L/):

p:first-of-type {color:blue}
p.myclass1:first-of-type {color:red}
.myclass2:first-of-type {color:green}

<div>
  <div>This text should appear as normal</div>
  <p>This text should be blue.</p>
  <p class="myclass1">This text should appear red.</p>
  <p class="myclass2">This text should appear green.</p>
</div>

有没有办法选择匹配(或不匹配)任意选择器的每个第n个孩子？例如,我想选择每个奇数表行,但是在行的子集中:

table.myClass tr.row:nth-child(odd) {
  ...
}

<table class="myClass">
  <tr>
    <td>Row
  <tr class="row"> <!-- I want this -->
    <td>Row
  <tr class="row">
    <td>Row
  <tr class="row"> <!-- And this -->
    <td>Row
</table>

但:nth-child()似乎只计算所有tr元素,无论它们是否属于"行"类,所以我最终得到一个偶数 "行"元素而不是我正在寻找的两个元素.同样的事情发生在:nth-of-type().

有人可以解释原因吗？

我正在尝试将奇数/偶数选择器应用于类父类的列表中的所有元素.

HTML:

<ul>
    <li class="parent">green</li>
    <li class="parent">red</li>
    <li>ho ho ho</li>
    <li class="parent">green</li>
    <li class="parent">red</li>
</ul>

CSS:

.parent:nth-child(odd) {
    background-color: green;
}

.parent:nth-child(even) {
    background-color: red;
}

ul {
    width:100px;
    height: 100px;
    display: block;
}

链接到jsFiddle

但颜色正在重置.我希望列表项是文本的颜色.

有没有办法做到这一点？

我正在为图像库制作一个简单的HTML.图库的每一行都可以有2,3或4个图像.(在一个2图像行中,每个图像元素都被命名type-2,同样的type-3和type-4.)

现在我想选择每行的最后一个元素来设置自定义边距.我的HTML是这样的:

<div id="content">
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- I want this, 2n+0 of type-2 -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this, 3n+0 of type-3 -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this, 4n+0 of type-4 -->
    <div class="type-2"></div>
    <div class="type-2"></div> <!-- this -->
    <div class="type-3"></div>
    <div class="type-3"></div>
    <div class="type-3"></div> <!-- this -->
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div>
    <div class="type-4"></div> <!-- this -->
</div>

我认为以下CSS可以工作,但它没有:

.type-2:nth-of-type(2n+0) {margin-right:0;}
.type-3:nth-of-type(3n+0) …

<div class="test">
    <div class="test1"></div>
    <div class="test2"></div>
    <div class="test3"></div>
</div>

为什么

.test3:nth-of-type(3) {height: 100px;background: black;}

工作，但是

.test3:nth-of-type(1) {height: 100px;background: black;}

不是？在这种情况下，第 n 个类型的工作与第 n 个孩子相同吗？

如果我删除第一个div，它会完美地工作。

但是，如果我有第一个没有该类的div，它就无法正常工作。

测试1应该是蓝色，下一个测试应该是红色，依此类推。

当我有另一个div时，它无法正常工作。我该如何解决这个问题？

.el:nth-of-type(odd) {
  background-color: blue;
}
.el:nth-of-type(even) {
  background-color: red;
}

<div id="content">
  <div>nothing</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
  <div class="el">Test 1</div>
</div>

我有一个项目网格,在某些项目后,有一个间隔.我试图:nth-of-type将样式应用到我不想应用于右侧的第一列项目.但是,当我有分隔符时,CSS似乎感到困惑.

https://jsfiddle.net/yquw291h/2/

正如你所看到的那样,在每个额外的div之后计数会消失,但CSS当然应该只考虑每个.box？

有没有办法可以让它只影响每个项目？我只希望第一列有某些样式,我也很高兴使用JS解决方案.

HTML

<div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="splitter">splitter</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
</div>

CSS

.box {
    width: 48%;
    float: left;
    height: 30px;
    background: #ccc;
}

.box:nth-of-type(odd){
    margin-right: 4%;
    background-color: red;
}

.splitter {
    width: 100%;
    float: left;
}