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 就无法工作。我认为我对声明的顺序是正确的，但我一定遗漏了一些东西。

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

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 的示例

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 尚未提供与某个类的第一个元素匹配的选择器，因此您现在必须使用覆盖规则。

Answer 3

我知道这是一个老话题，但它永远相关。我在我的一个 Joomla 网站上看到一个奇怪的现象，它似乎具有 p:first-of-type 或 p:nth-of-type 样式的行为，其中文章中的第一段和第二段具有不同的字体大小。这种情况似乎只发生在移动设备上，否则未设置样式的“p”最终会使用比前面的“p”更大的字体进行渲染。

所以我的问题是，如何在不更改“p”的默认字体的情况下覆盖它？

提前致谢， 布鲁斯