Mozilla Hacks

Firefox 3.5 中的新 CSS3 属性 – *-of-type

头像照片 作者

发布于 2009 年 6 月 30 日 分类于 35 Days、CSS、Feature 和 Firefox

在今天的特色文章中，我们将简要介绍三个新的 CSS3 伪类：only-of-type、first-of-type 和 last-of-type。它们与我们在之前文章中介绍的 *-nth 类非常相似。

first-of-type 和 last-of-type

这两个伪类允许您在特定元素中选择同级元素列表中的第一个和最后一个元素。您可以使用它来为列表中的第一个元素着色，使用 opacity 使页面上的最后一个段落淡出，或其他一些方法。以下示例将在文档的第一个段落中设置小写字母

#type-ex1 div:first-of-type {
    font-variant: small-caps;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla neque, cursus venenatis vehicula ac, rutrum id libero. Nullam porttitor ultricies eros, laoreet mollis nunc vestibulum in. Sed iaculis nibh nec tellus vulputate pulvinar. Aliquam ultricies mauris vel nulla semper ac dignissim arcu sollicitudin.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras molestie elit sed libero pretium faucibus. Ut sed lacus eget est gravida aliquet sed sed risus. Maecenas vitae volutpat purus. Fusce porttitor aliquam lectus sit amet vehicula. Nulla molestie mi lacus.

only-of-type

only-of-type 与前面两个类似，但仅在元素没有名称相同的同级元素时才会选择该元素。以下是一个有点牵强的例子*，它将隐藏 div 内部的单个图像。如果 div 中有多个图像，它们将可见。

.type-ex2 img:only-of-type {
    display: none;
}
这是单个图像之前的文字。

这是单个图像之后的文字。
这是两个图像之前的文字。


这是两个图像之后的文字。

就是这样。享受吧！

[ * 注意：如果有人能为 only-of-type 想出一个更好的例子，我很乐意听。这个伪类很少有应用场景。 ]

7 条评论

  1. Ben Truyman

    作为一名前端 Web 开发人员，我很高兴在大多数浏览器中可以使用 :first-child 和 :last-child 伪选择器（看看你，IE6）。但这很棒，因为它减少了所需的额外标记量。

    2009 年 6 月 30 日 下午 9:39

  2. Asrail

    测试

    p:first-of-type:before {content: “阅读一些段落：”; display:block}
    p:only-of-type:before {content: “阅读一段落”; display:block}

    Lorem Ipsus
    耶

    2009 年 6 月 30 日 下午 9:47

  3. Asrail

    它应该有一个预览功能…

    <html>
    <head>
    <title>测试</title>
    <style type=”text/css”>
    p:first-of-type:before {content: “阅读一些段落：”; display:block}
    p:only-of-type:before {content: “阅读一段落”; display:block}
    </style>
    </head>
    <body>
    <p>Lorem Ipsus</p>
    <p>耶</p>
    </body> </html>

    2009 年 6 月 30 日 下午 9:58

  4. Asrail

    另一个例子是在 UL 中只有一个 LI 时将其内联显示，否则作为列表显示。

    2009 年 6 月 30 日 下午 10:04

  5. Edward Lee

    所有这些 -of-type 对于动态生成的内容似乎更有用，而仅有的 -of-type 必须是第一个 -of-type 和最后一个 -of-type。

    如果您使用 first-of-type 进行样式设置，并使用 last-of-type 进行样式设置，则需要确保您专门处理只有一个元素的情况，因为它将显示为单个起始盖帽或单个结束盖帽，具体取决于您的样式顺序（因为最后一个背景样式优先）。

    而无需输入 :first-of-type:last-of-type { background: both-cap.png }，您可以直接使用 :only-of-type。

    2009 年 7 月 1 日 上午 12:18

  6. Ehsan Akhgari

    使用 :only-of-type 的一个实际例子可能是构建一个图片库，例如，您可以将多个元素并排放置，并进行适当的浮动等。

    现在，如果画廊只包含一张图片，您不希望它左浮动到空白处；所以您可以执行以下操作（粗略示例）

    img {
    float: left;
    margin: 1em;
    width: 5em;
    }

    img:only-of-type {
    float: none;
    margin: .5em;
    width: 20em;
    }

    2009 年 7 月 12 日 上午 11:27

  7. […] Firefox 3.5 中的新 CSS3 属性 – *-of-type (hacks.mozilla.org) 分享: […]

    2009 年 8 月 11 日 上午 1:10

本文的评论已关闭。