`
guoyiqi
  • 浏览: 1002357 次
社区版块
存档分类
最新评论

first-child(转自:http://www.aa25.cn/css2/pseudo_class_first-c677.shtml)

 
阅读更多

定义

:first-child伪类向属于其他元素的第一个子元素的一个元素添加特殊样式.。

说明

利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。例如,p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素,但事实上并非如此,如果要选择段落的第一个子元素,应当写为 p > *:first-child。

例子

例子 1 - 匹配第一个 <p> 元素

在下面的例子中,选择器匹配属于任意元素的第一个子元素的 <p> 元素:

例子 2 - 匹配所有 <p> 元素中的第一个 <em> 元素

在本例中,选择器匹配属于 <p> 元素中的第一个子元素的 <em> 元素:

例子 3 - 匹配所有第一个子元素 <p> 元素中的所有 <em> 元素

在下面的例子中,选择器匹配属于其他元素的第一个子元素的 <p> 元素中的所有 <em>:

分享到:
评论

相关推荐

    hadoop-native-lib-x64-2.7.3.tar.gz

    17/09/11 14:30:49 WARN bzip2.Bzip2Factory: Failed to load/initialize native-bzip2 library system-native, will use pure-Java version 17/09/11 14:30:49 INFO zlib.ZlibFactory: Successfully loaded & ...

    tailwindcss-pseudo-element-plugin:一个为Tailwind CSS提供之前和之后的变体以及伪内容{value}实用工具类的插件

    @ shimyshack / tailwindcss-pseudo-element-plugin 提供一个插件before和after的变体以及pseudo-content-{value}实用工具类,顺风CSS。 安装 从npm安装插件: # Using npm npm install @shimyshack/tailwindcss-...

    MATLAB实现伪距单点定位_MATLAB_to_achieve_pseudo-distance_s_-Pseudo--

    MATLAB实现伪距单点定位_MATLAB_to_achieve_pseudo-distance_s_-Pseudo---distance-single-point-positioning

    openjdk-19_linux-x64_bin.tar.gz

    6. **Enhanced Pseudo-Random Number Generators (PRNGs)(增强的伪随机数生成器)**:提升了PRNG的性能和安全性,为各种应用场景提供了更多选择。 7. **Foreign-Memory Access API(外部内存访问API)**:允许Java...

    CSS样式代码大全

    #### 十一、伪类 Pseudo-classes **1. `:active`**:当前被激活的元素。 - **示例**:`a:active { color: red; }` **2. `:focus`**:当前获取焦点的元素。 - **示例**:`input:focus { border-color: blue; }` ...

    css-blank-pseudo:空的样式表单元素

    input { /* style an input */}input : blank { /* style an input without a value */}用法在命令行中,转换使用:blank选择器CSS文件: npx css-blank-pseudo SOURCE.css TRANSFORMED.css 接下来,将转换后CSS与...

    Hadoop搭建详细流程

    - 安装Hadoop:`sudo apt-get install hadoop-0.20-conf-pseudo` - 配置Hadoop环境变量:编辑`~/.bashrc`文件,添加HADOOP_HOME路径并设置PATH。 3. 初始化Hadoop: - 启动Hadoop:`sudo service hadoop-hdfs-...

    stylelint-selector-pseudo-class-lvhfa:链接选择器中LVHFA顺序的Stylelint规则

    npm install stylelint-selector-pseudo-class-lvhfa --save-dev 用法 将此配置添加到您的.stylelintrc : { " plugins " : [ " stylelint-selector-pseudo-class-lvhfa " ], " rules " : [ " plugin/...

    Python库 | pseudo-python-0.2.16.tar.gz

    资源分类:Python库 所属语言:Python 资源全名:pseudo-python-0.2.16.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    Python库 | pseudo-python-0.2.14.tar.gz

    资源分类:Python库 所属语言:Python 资源全名:pseudo-python-0.2.14.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    前端开源库-has-pseudo-class

    "has-pseudo-class"就是一个专注于处理CSS伪类的前端开源库。这个库的核心功能是检测一个CSS选择器是否包含有伪类,这对于理解和优化CSS选择器的使用,以及在动态渲染时避免不必要的计算,有着重要的意义。 伪类是...

    postcss-pseudo-class-any-link:使用

    PostCSS伪类任何链接 使您可以按照规范在CSS中使用:any-link伪类。 nav :any-link &gt; span { background-color : ...npm install postcss-pseudo-class-any-link --save-dev 使用处理CSS: const postcssPseudo

    tailwindcss-pseudo-elements:TailwindCSS插件,添加伪元素的变体

    tailwindcss-pseudo-elements TailwindCSS插件,添加伪元素的变体( ::before , ::after , ::first-letter等)。 用法 安装 NPM npm install tailwindcss-pseudo-elements --save-dev 纱 yarn add tailwindcss-...

    tailwindcss-pseudo-selectors:Tailwind CSS插件,将所有不同的伪选择器添加到变量中

    Tailwindcss-伪选择器Tailwind CSS插件,将所有不同的伪选择器添加为变体安装NPM npm install tailwindcss-pseudo-selectors --save-dev纱yarn add tailwindcss-pseudo-selectors -D用法配置将插件添加到您的...

    当前位置:https:current-position.vercel.app

    5. **自定义伪元素和伪类(Pseudo-elements & Pseudo-classes)**:例如`::before`和`::after`可以用来在元素前后添加内容,而`:hover`、`:active`和`:focus`等伪类可以控制鼠标悬停、元素被点击或获得焦点时的样式...

    Internetworking IPv6 with Cisco Routers

    Routing header: pseudo code, Example of Routing header processing, Processing of ICMPv6 packets, Addresses to be used during the testing phase, MTU of a tunnel and fragmentation, Transmission of IP ...

    纯css鼠标覆盖阴影文字效果

    在本例中,主要涉及两个关键概念:阴影(box-shadow)和伪类选择器(pseudo-classes)。阴影效果通常用于为元素添加立体感或创建阴影效果,而伪类选择器则用于在特定的交互状态(如鼠标悬停)下改变元素的样式。 1....

    Python库 | pseudo-0.2.4-py3-none-any.whl

    资源分类:Python库 所属语言:Python 资源全名:pseudo-0.2.4-py3-none-any.whl 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059

    eap.rar_.eap_EAP_EAP-TLS_eap-aka_eap-sim

    5. eap_pax.c:PAX(Pseudo-random Function Authenticated Key Exchange)是一种安全的密钥交换协议,可以作为EAP的身份验证方法。 6. eap_mschapv2.c:MS-CHAPv2(Microsoft Challenge-Handshake Authentication ...

Global site tag (gtag.js) - Google Analytics