zoukankan      html  css  js  c++  java
  • :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
  • 相关阅读:
    vue去除#号tomcat配置
    vscode配置
    git忽略想要提交的文件
    vue-cli配置移动端自适应
    远程调试工具 -- weinre
    将博客搬至CSDN
    错误:this dependency was not found:'element-ui/lib/theme-chalk/index.css'。。。。。。。
    win上java1.7和1.8版本修改环境变量无效.md
    mysql 事务
    mysql 函数
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13286396.html
Copyright © 2011-2022 走看看