相关疑难解决方法(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？

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

如何选择具有类名称的"最后一个孩子":list？

<style>
    ul li.list:last-child{background-color:#000;}
</style>

我知道上面的例子不起作用,但是有什么类似的东西可以工作吗？

重要:

a)我不能使用ul li:nth-child(3),因为它可能发生在第四或第五位.

b)没有JavaScript.

任何帮助将不胜感激,谢谢!

问题在于CSS和HTML.这是一个带有示例代码的jsFiddle链接.

HTML

<ul>
    <li class"complete">1</li>
    <li class"complete">2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

li.complete:last-child {
    background-color:yellow;
}

li.complete:last-of-type {
    background-color:yellow;
}

这些CSS行中是否应该使用"完整"类来定位最后一个li元素？

jQuery中的这个查询也没有以它为目标:

$("li.complete:last-child");

但是这个做了:

$("li.complete").last();

li {
  background-color: green;
}
li.complete:first-child {
  background-color: white;
}
li.complete:first-of-type {
  background-color: red;
}
li.complete:last-of-type {
  background-color: blue;
}
li.complete:last-child {
  background-color: yellow;
}

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

我想从最后一个figure元素中删除背景:

@media (min-width: 50em) {
  #mission #press figure {
    padding-left: 0;
    background: url('/assets/img/splash-green.png?1345829368') no-repeat 50% bottom;
  }
  #mission #press figure:last-child {
    background: none;
  }
}

背景仍然显示出来.我错误定位了吗？

第n次匹配应该在jsfiddle下面的方式工作

:nth-match(even of p,h3) {text-decoration: underline;}

这应该强调每一秒p和h3元素.但是,它不起作用 - 无论是在FF还是在Chrome中:

http://jsfiddle.net/VUKQS/

哪里出了问题？

问题

我们想在上一篇博文中应用一些CSS.问题是div'blog-posts'中的最后一个元素与'blog-post'div的元素类型相同.

我试过了:

• 最后的型
• 最后一个孩子

HTML

<div class="blog-posts">
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="f03-456245"></div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS

.blog-post:last-child{
    //do some css
}

Run Code Online (Sandbox Code Playgroud)

我有这个html代码：

<div id="mydiv">
    [other divs]
    <div data-day="1">content</div>
    [other divs with data-day attribute]
    <div data-day="random">content</div>
    [other divs]
</div>

我想选择mydiv中具有data-day属性的最后一个元素。我怎样才能做到这一点？

#mydiv div[data-day]:last-child

我试过了，但是没有用。

我想要像jquery :last选择器,但在纯css.

如果我不知道它在DOM结构中的索引,我怎么才能得到'z'段落!.或者如何获得班级'.area'的最后一个孩子？我看到这个CSS3获取最后一个元素,但它在我的情况下不起作用,因为我在父元素中有另一个子元素.

p.area:last-child 没有用!

当我们知道有多少元素与类一起时,我找到了一个解决方案.area.

选择器看起来像这样:p.area ~ p.area ~ p.area 但是当我们不知道......我想......只是为了好玩=)

<div>

<h1>This is a heading</h1>
<p class="">The first paragraph.</p>
<p class="area">The x paragraph.</p>
<p class="area">The y paragraph.</p>
<p class="area">The z paragraph.</p>
<p class="">The last paragraph.</p>

</div

我想用CSS选择第一个和最后一个孩子，但是它不起作用。请看看我的小提琴并为我提供帮助：

.area {
  height: 100px;
  width: 100px;
}

.area:first-child {
  background-color: red;
}

.area:last-child {
  background-color: green;
}

<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>

https://jsfiddle.net/rbw8dpsb/1/