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 etc。）并且实际上并没有选择类的第一个类型。

的替代

＆＃39;〜＆＃39;修复

代字号＆＃39; ~＆＃39;解决方法提到了 here 。

/* 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; }

<强> Example using '~' Method

（感谢BoltClock，帮助我解决这个问题，这是他的方法。）

切换div订单

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

代码：

<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>

<强> Example of switching order

使用：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; }

<强> Example using :nth-of-type

Answer 2

以下是我对~解决方法的看法。我认为我已经填上了，因为Rion Williams非常友好地链接到我对his answer的解决方法的描述（这也很好地解释了为什么你的代码没有按预期工作）：

/* The first p in all .content-left elements */
#review .content_left p:first-of-type {
    padding-top: 10px;
}

/* 
 * Undo the above style for the first p in subsequent .content-left elements.
 */
#review .content_left ~ .content_left p:first-of-type {
    padding-top: 0px;
}

/* The first letter in the first p in all .content-left elements */
#review .content_left 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;
}

/* 
 * Undo the above styles for the first letter in the first p
 * in subsequent .content-left elements.
 * 
 * I'm just using the initial values for every property here; you'll want to
 * adjust their values as necessary.
 */
#review .content_left ~ .content_left p:first-of-type:first-letter {
    float: none;
    line-height: normal;
    padding-right: 0px;
    padding-bottom: 0px;
    font-family: inherit;
    font-weight: normal;
    font-size: medium;
    color: inherit;
}

jsFiddle preview

根据您的布局，您可能还需要为某些其他类重复此操作。不幸的是，由于CSS尚未提供与某个类的第一个元素匹配的选择器，因此您现在必须使用覆盖规则。

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

2 个答案:

的替代