【CSS3】css选择器中:first-child与:first-of-type的区别

曾经终败给现在 2022-09-16 03:49 50阅读 0赞

[css选择器中:first-child与:first-of-type的区别 - 无双 - 博客园][css_first-child_first-of-type_ - _ -]

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>:first-of-type</title>
        <style>
    
            /*定位父元素.wrapper下的span类型的第一个span元素*/
            span:first-child {
                background: red;
            }
    
            /*无效选择器【因为p没有在.wrapper的第一个位置】*/
            p:first-child {
                background: red;
            }
    
            /*定位父元素.wrapper下的p类型的第一个p元素*/
            p:first-of-type {
                background: yellow;
            }
        </style>
    </head>
    <body>
    <div class="wrapper">
        <span>我是第一个span元素</span>
        <p>我是第一个段落</p>
        <p>我是第二个段落</p>
        <div>我是第一个Div元素</div>
        <div>我是第二个Div元素</div>
        <p>我是第三个段落</p>
        <p>我是第四个段落</p>
        <div>我是第三个Div元素</div>
        <div>我是第四个Div元素</div>
    </div>
    </body>
    </html>

[css_first-child_first-of-type_ - _ -]: https://www.cnblogs.com/2050/p/3569509.html

发表评论取消回复

表情：

评论列表（有 0 条评论，50人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3属性选择器(CSS3)

CSS3属性选择器(CSS3) <!DOCTYPE html> <html lang="en"> <head> <met

约定不等于承诺〃/ 2023年10月03日 13:31/ 0 赞/ 114 阅读

相关 CSS3选择器

css3选择器兄弟选择器（~）属性选择器（E\[att\]）伪类选择器（：）伪对象选择器我们

分手后的思念是犯贱/ 2023年06月25日 02:30/ 0 赞/ 110 阅读

相关 CSS3选择器

selector of css3 Relationship Selectors E+F 下一个满足条件的兄弟元素节点 E~F 下一堆满足条件的兄弟元素节点 At

偏执的太偏执、/ 2022年10月31日 04:17/ 0 赞/ 264 阅读

相关 css3选择器

![bgcolor.jpg][] ![fontSize.jpg][] [前端必须掌握30个CSS3选择器][30_CSS3] [征服高级C

系统管理员/ 2022年09月24日 07:23/ 0 赞/ 353 阅读

相关【CSS3】css选择器中:first-child与:first-of-type的区别

[css选择器中:first-child与:first-of-type的区别 - 无双 - 博客园][css_first-child_first-of-type_ - _ -]

曾经终败给现在/ 2022年09月16日 03:49/ 0 赞/ 51 阅读

相关 CSS3选择器

2 选择器 > 作用:选择页面上的某一个或某一类元素 2.1 基本选择器 2.1.1 标签选择器标签选择器会选择到页面上所有这个标签的元素 <h

青旅半醒/ 2022年09月09日 13:48/ 0 赞/ 383 阅读

相关 css3选择器

css3选择器参考手册：[http://www.runoob.com/cssref/css-selectors.html][http_www.runoob.com_cssref

系统管理员/ 2022年05月10日 10:18/ 0 赞/ 462 阅读

相关 CSS3 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。） <tabl

阳光穿透心脏的1/2处/ 2022年01月30日 16:11/ 0 赞/ 396 阅读

相关 CSS3选择器

CSS是层叠样式表（Cascading Style Sheets）的简称，并且它是增量式，向后兼容，所以它支持CSS3以前的所有的版本，当然包括CSS2的内容，CSS3也称作级

爱被打了一巴掌/ 2021年12月20日 01:04/ 0 赞/ 489 阅读

相关 CSS3选择器

本文笔记基于「千古壹号」的GitHub项目：https://github.com/qianguyihao/web 文章目录 1.介绍 2.选择器

野性酷女/ 2021年12月10日 03:25/ 0 赞/ 465 阅读