:first-of-type (Selectors) – CSS 中文开发手册

[

  • ??CSS 中文开发手册

    :first-of-type (Selectors) - CSS 中文开发手册

    该:first-of-typeCSS伪类表示其同类型的一组同胞元素中的第一个元素。

    /* Selects the first <p> to appear inside a parent element
       regardless of its position inside the siblings */
    p:first-of-type {
      color: red;
    }

    注意:如最初定义的那样,所选元素必须有一个父元素。但是从选择器级别4开始,这不再是必需的。

    语法

    :first-of-type

    实例

    例1:简单地选择第一个段落

    我们来考虑下面的HTML:

    <h2>Heading</h2>
    
    <p>Paragraph</p>
    
    <p>Paragraph</p>

    和下列CSS:

    p:first-of-type {
    ? color: red;
    }

    这就给出了以下结果--仅有第一段为红色,因为它是第一个出现在正文中的段落类型元素:

    示例2:假定的通用选择器

    此示例演示了在没有编写简单选择器时如何假定通用选择器。

    首先,一些HTML如下:

    <div>
      <span>This `span` is first!</span>
      <span>But this `span` isn‘t.</span>
      <span>This <em>nested `em` is</em>!</span>
      <span>And so is this <span>nested `span`</span>!</span>
      <b>This `b` qualifies!</b>
      <span>This final `span` does not.</span>
    </div>

    接下来,有如下CSS:

    div :first-of-type {
      background-color: lime;
    }

    结果如下:

    规范

    Specification

    Status

    Comment

    Selectors Level 4The definition of ‘:first-of-type‘ in that specification.

    Working Draft

    Matching elements are not required to have a parent.

    Selectors Level 3The definition of ‘:first-of-type‘ in that specification.

    Recommendation

    Initial definition.

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    1.0

    (Yes)

    3.5 (1.9.1)

    9.0

    9.5

    3.2

    Feature

    Android

    Edge

    Firefox Mobile (Gecko)

    IE Mobile

    Opera Mobile

    Safari Mobile

    Basic support

    2.1

    (Yes)

    1.0 (1.9.1)

    9.0

    10.0

    3.2

    
    
  • ??CSS 中文开发手册
  • ]
    转载请保留页面地址:https://www.breakyizhan.com/css/31221.html

    :first-of-type (Selectors) – CSS 中文开发手册

    上一篇:使用FDFS上传图片到服务器报错 ERROR server: 39.100.67.73:22122, response status 2 != 0


    下一篇:HTML DOM Time 对象