CSS问题：:first-of-type :first-letter的问题

Question

我已将页面设置为在内容的第一个段落上创建一个大型的首字母。这样做是有效的，但当我的另一个div具有指定的类出现在我的受影响元素之前时，它会使首字母消失。

参见以下示例： 正确显示：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就无法生效了。我认为我在声明方面是正确的顺序，但我一定漏掉了什么。

有人知道为什么这不像预期那样工作吗？

- Yazmin

Answer 1

这是预期的工作方式，因为:first-of-type选择器实际上选择特定类型的第一个元素（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 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>​ 

交换顺序的示例：

---

使用 :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的示例

- Rion Williams

---

你可能想提供一个例子，展示一下我的 ~ 解决方案在这里如何应用 :) - BoltClock

好的，我可以组装一个并单独发布。尽管似乎有很多需要撤销的规则，这将是一件麻烦的事... - BoltClock

目前正在处理这个问题 - 我感觉我离解决很近了。我已经选择了第一个，但是第二个类的第一段仍然会被触发。http://jsfiddle.net/d73u9/4/ - Rion Williams

啊，你不需要为“p”重复它，因为元素类型是“p”，这意味着“:first-of-type:first-letter”将按预期工作。你需要覆盖的是选择器“.content_left 〜 .content_left p：first-of-type:first-letter”，这很繁琐，因为有许多声明需要覆盖。时间已经很晚了，我现在不会很快想到更多解决办法 :P - BoltClock

我认为我成功地弄清楚了，我确信有很多冗余，但“嘿 - 看起来不错”。 :) http://jsfiddle.net/d73u9/7/ - Rion Williams

Answer 2

这是我对波浪线（~）解决方法的看法。我想参与讨论，因为Rion Williams很友好地在他的答案中链接到了我的解决方法描述（该答案还很好地解释了为什么你的代码不像预期的那样工作）。

/* 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 预览

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

- BoltClock