当前位置:首页 » php学习笔记 » css--结构伪类选择器first-child与first-of-type的区别

css--结构伪类选择器first-child与first-of-type的区别

原创 stpevenchow 35°c 2019年10月03日 23:39 php学习笔记 0条评论
  移步手机端

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>first-child与first-of-type的区别</title>
    <style type="text/css">
        .div1>div:first-child{
            color: pink;
            font-weight: bold;
        }
        .div1>div:first-of-type{
            color: red;
            font-weight: bold;
        }
        .div1>div:last-of-type{
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="div1">
        <span>北京1</span>css选择器的区别.png

        <div>上海1</div>
        <h5>重庆1</h5>
        <a href="#">广州1</a>
        <br>
        <span>北京2</span>
        <div>上海2</div>
        <h5>重庆2</h5>
        <a href="#">广州2</a>
        <br>
        <span>北京3</span>
        <div>上海3</div>
        <h5>重庆3</h5>
        <a href="#">广州3</a>
        <br>
        <span>北京4</span>
        <div>上海4</div>
        <h5>重庆4</h5>
        <a href="#">广州4</a>
        <br>
        <span>北京5</span>
        <div>上海5</div>
        <h5>重庆5</h5>
        <a href="#">广州5</a>

        
    </div>
</body>
</html>
关于first-child
先找顺序:所有标签中的第一个标签
再找标签:第一个标签必须是符合条件的标签,如果不符合条件则没有字体是粉色
关于first-of-type
先找标签:先找到所有符合设定类型的标签
再找顺序:在按照设定的顺序给标签添加样式效果

当然了掌握了first-of-type,过后我们还可以把last-of-type引用进来

欢迎阅读本文,如果本文对您有所帮助,记得收藏/转发☺

本文链接:http://stpeven.com/post/123.html

版权声明:本文为原创文章,版权归 stpevenchow 所有,欢迎分享本文,转载请保留出处!

本文标签:

三人行,必有我师

评论(0)

发表评论:


【顶】 【踩】 【好】 【懵】 【赞】 【表情】

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

推荐阅读
10月14日

css-简单的调查表单制作

发布 : | 分类 : php学习笔记 | 评论 : 0人 | 浏览 : 7次
css-简单的调查表单制作

     拿到种类型的表单过后,我们首先要分析,这个表单大致的要涉及到html哪些标签属性,从表面上来看,这个表格大概是由3个部分组成,主题,标题,内容,把这3个确定好了过后,后面就是直接调用css样式了。下面直接放出代码    <!DOCTYPE html><html><head>    <meta charset="utf...

标签 :