CSS问题:第一个类型:第一个字母

Question

我已经设置了我的页面,以便在第一段内容上创建一个大的下限字母.这可以按预期工作,但是当我在受影响的元素之前有另一个具有指定类的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无效.我以为我有关于声明的正确顺序,但我必须遗漏一些东西.

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

Answer 1

这是按预期的方式工作:第一个类型的选择器实际上选择特定类型的元素(section,div,span等)中的第一个,并且实际上不选择类的第一个类型.

备择方案

'〜'修复

这里~提到的代字号' '解决方法.

/* Targets all paragraphs */
p 
{
        display: block;
        clear: both;
}

/* Targets all paragraphs within divs in #review */
#review div p
{ 
        padding-top:10px;
}

/* Targets the first letter within each paragraph */
#review div p: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;
}    

/* Removes the padding from all except the first paragraphs */
#review > div ~ div > p ~ p, 
#review > .content_left ~ .content_left p:first-of-type 
{
        padding-top: 0px;  
}

/* Removes the first letter stylings of the non-first paragraphs within 
   .content_left classes */
#review > .content_left ~ .content_left p:first-of-type:first-letter, 
#review > div ~ div > p ~ p:first-letter 
{
        float: none;
        line-height:90%;
        padding-right: 0px;
        padding-bottom: 0px;
        font-family: "Georgia",_serif;
        font-weight: normal;
        font-size: 12px; 
}

使用'〜'方法的示例

(感谢BoltClock,帮助我解决这个问题,这是他的方法.)

切换div命令

移动.content_right.content_left部分后面的div,因为它们是浮动的,你仍然可以保持相同的布局.

码:

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

切换顺序示例:

使用:nth-​​of-type选择器

使用:nth-of-type选择器选择正确的div.

码:

#review .content_left:nth-of-type(2) :first-child
{
    padding-top:10px;
}

#review .content_left:nth-of-type(2) :first-child: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;
}  

使用示例:nth-​​of-type