相关疑难解决方法(0)

是否有一个CSS选择器用于具有类的子项的第一个实例？例如,请使用以下代码:

<div id="container">
    <div class="nothing">
    </div>
    <div class="child"> <!-- SELECT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
    <div class="child"> <!-- NOT THIS ONE -->
    </div>
</div>

是否有一个css选择器来设置第一次出现div类"child"的样式？

是否有可能首先li在内部具有特定类ul？例如 :

 <ul>
     <li class="a"></li> <!-- I want to target this li -->
     <li class="a"></li>
     <li class="a"></li>
     <li class="b"></li> <!-- and this li -->
     <li class="b"></li>
     <li class="b"></li>
 </ul>

有可能吗？

我已经设置了我的页面,以便在第一段内容上创建一个大的下限字母.这可以按预期工作,但是当我在受影响的元素之前有另一个具有指定类的div时,它会使得drop cap消失.

查看示例...
正确显示:http
://jsfiddle.net/KPqgQ/显示不正确:http://jsfiddle.net/d73u9/

我的页面中有以下代码:

<section id="review">
  <div class="content_right"></div>
  <div class="content_left">
    <p>text</p>
    <p>text</p>
  </div>
  <div class="content_left">
    <p>text</p>
    <p>text</p>
  </div>
</section>

使用以下CSS:

   #review .content_left:first-of-type p:first-of-type{
        padding-top:10px;
    }

    #review .content_left:first-of-type p:first-of-type:first-letter{
        float: left;
        line-height:90%;
        padding-right: 15px;
        padding-bottom: 10px;

        font-family: "Georgia",_serif;
        font-weight: bold;
        font-size: 60px;
        color:black;
    }

创建一个大号首字母.

当我删除"content_right"div时,此代码有效,但在那里,CSS无效.我以为我有关于声明的正确顺序,但我必须遗漏一些东西.

有谁知道为什么这不按预期工作？

嘿家伙我有以下标记::

<div class="heading-container">
        <p class="stroke">Who we</p>
        <h2 class="section-title extreme-bold">Contact us</h2>
        <p class="stroke"></p>
</div>

现在我可以使用以下选择器选择第一个.stroke:

.heading-container .stroke:nth-child(1){
    max-width: 200px;
}

但以下不适用于第二个中风课:

.heading-container .stroke:nth-child(2){
    max-width: 200px;
}

但以下再次有效:

.heading-container .stroke:nth-child(3){
    max-width: 200px;
}

现在为什么价值3适用于第二个第n个孩子的选举？

对于第二个孩子来说,以下是不合适的:

.heading-container .stroke:nth-child(2){
    max-width: 200px;
}

也许这个问题很荒谬,但我想知道这个事实.我有一个li带有两个类的元素(见下文),但它没有像我预期的那样工作.有人知道原因吗？

.red:first-child {
    color:#F00;
}
.blue:first-child {
    color:#00F; /* not working */
}
.red:last-child {
    color:#F00; /* not working */
}
.blue:last-child {
    color:#00F; 
}

<ul>
    <li class="red">one</li> <!-- This is the first child of red -->
    <li class="red">two</li>
    <li class="red">three</li>
    <li class="blue">one</li> <!-- and this first child of blue -->
    <li class="blue">two</li>
    <li class="blue">three</li>
</ul>

我的IE7问题很少.我有以下CSS代码,它在IE7中不起作用.但是,.row [class*="span"]和:first-child如果不合并则都可以工作.有没有办法做类似的事情或让它以某种方式工作？

.row [class*="span"]:first-child {
    margin-left: 0;
}

我有以下HTML:

<div class="statistics">
    <span class="glyphicon glyphicon-calendar"></span>19/06/2015
    <span class="glyphicon glyphicon-eye-open"></span> 18 lectures
    <span class="glyphicon glyphicon-comment"></span> 1 commentaire
    <span class="glyphicon glyphicon-user"></span> Sébastien Sougnez
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart note"></span>
    <span class="glyphicon glyphicon-heart-empty note"></span>
</div>

我正在应用一些CSS样式,其中,我有这个:

.article .statistics span.note {
    margin-left:0px;
    margin-right:5px;
}

.article .statistics span.note:first-child {
    margin-left:25px;
}

第一个CSS块被正确应用,所有"note"跨度之间的空间大约是5px但是我想在第一个跨度上放置一个margin,左边是25px的"note"类,但是,第一个孩子做似乎没有选择奇怪的元素,因为我也有这个CSS:

.article .statistics span {
    margin-left:25px;
    margin-right:5px;
}

.article .statistics span:first-child {
    margin-left:0px;
}

在这里,它工作正常,所有跨度除了第一个之外由25px(左侧)分隔.我想这与课程有关,但我查看了互联网,这似乎是正确的语法.

谢谢

我尝试删除类名为"true"的last-child的边框.:last-child不管用.

<div>
    <div class="common true">1111</div>
    <div class="common">2222</div>
    <div class="common true">3333</div>
    <div class="common true">4444</div>
    <div class="common true">5555</div>
    <div class="common true">6666</div>
    <div class="common true">7777</div>
    <div class="common">8888</div>
</div>

CSS:

.common.true {
    display: block;
    border-top: 1px solid;
} 

.true:last-child {
    border-top: none;
} 

JSFIDDLE:http://jsfiddle.net/C23g6/1253/

如果我删除第一个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>

遇到一个奇怪的问题

对于HTML：

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li class="has-item">four</li>
    <li>five</li>
</ul>

这有效：

ul li:first-child {
  font-size:30px
}

但为什么不这样

ul li.has-item:first-child {
  font-size:8px
}

小提琴： https : //jsfiddle.net/xx9us2sg/1/