目录
本文目标:
问题:
现在来具体操作
总结:
首页 web前端 css教程 CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )

CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )

Jun 11, 2020 pm 02:28 PM
css3

本文目标:

1、掌握CSS中结构性伪类选择器—nth-child的用法

问题:

1、实现以下效果,且使用纯DIV+CSS,必须使用结构性伪类选择器—first-of-type

实现效果.png

附加说明:

1、整体宽为500

2、每个名言标签的间距为20,内部间距为25,字体为cursive

现在来具体操作

1、准备素材:新建images目录,将素材存放与此,方便管理,该案例中素材为一张文件图片

file.png

2、创建好index.html,写好架构,架构如何分析呢

思路分析:

1、目标分为3个部分,每个部分其实就是展示一段名言,左边带一个边框,但是第一个部分我们就可以使用first-of-type来实现,因为它的作用就是来设置指定类型的位置为第一个子元素的所有元素

好,先按照分析,写好思路,暂时不管css的实现

代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>结构性伪类选择器—:first-of-type</title>

</head>

 

<body>

    <div class="container">

        <div class="word">

            <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>

        </div>

        <div class="word">

            <p> 什么是人生?人生就是永不休止的奋斗!只有选定了目标并在奋斗中感到自己的努力没有虚掷,这样的生活才是充实的,精神也会永远年轻。——路遥《平凡的世界》</p>

        </div>

        <div class="word">

            <p>生活啊,生活!你有多少苦难,又有多少甘甜!天空不会永远阴暗,当乌云退尽的时候,蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比,花朵仍然会蓬勃开放。——路遥《平凡的世界》</p>

        </div>  

    </div>

</body>

 

</html>

登录后复制

3、写样式 ,创建css文件夹,里面新建index.css,里面的样式怎么写了,以下是分析思路

思路分析:

所有元素的共同样式.container *

1、因为有些元素都有自己默认的padding,margin,难记,所以为了避免影响思路,我们统一将它们的默认值设置为0,之后要设置成多少,之后在元素内部单独设置

所以index.css中添加代码如下:

1

2

3

4

.container *{

    padding:0;

    margin:0;

}

登录后复制

外层容器

1、根据要求得知宽度为500

所以index.css中添加代码如下:

1

2

3

.container{

    width:500px;

}

登录后复制

文本设置.word

1、有背景色,带左边框,和下面的文本存有间隔,且字体为cursive

2、带一个小图标的背景图片,背景不重复

所以index.css中添加代码如下:

1

2

3

4

5

6

7

8

9

10

.word{

    background-color: rgb(255,243,212);

    border-left: 10px solid rgb(246,183,60);

    margin-bottom: 20px;

    padding: 25px;

    font-family: cursive;

    background-image: url(../images/file.png);

    background-repeat: no-repeat;

    background-size: 15px;

}

登录后复制

第一个文本设置

1、因为要求必须使用first-of-type,结合它的作用,就是设置第一个.word,我们可以用它来设置颜色

2、因为具体要求是让第一个.word里面的字体变红色

所以index.css中添加代码如下:

1

2

3

.word:first-of-type{

    color:red;

}

登录后复制

到此为止,index.css代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

.container *{

    padding:0;

    margin:0;

}

.container{

    width:500px;

}

.word{

    background-color: rgb(255,243,212);

    border-left: 10px solid rgb(246,183,60);

    margin-bottom: 20px;

    padding: 25px;

    font-family: cursive;

    background-image: url(../images/file.png);

    background-repeat: no-repeat;

    background-size: 15px;

 

}

.word:first-of-type{

    color:red;

}

登录后复制

然后将index.css引入index.html中

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html>

 

<head>

    <meta charset="utf-8">

    <title>结构性伪类选择器—:first-of-type</title>

    <link href="css/index.css" rel="stylesheet" type="text/css">

</head>

 

<body>

    <div class="container">

        <div class="word">

            <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>

        </div>

        <div class="word">

            <p> 什么是人生?人生就是永不休止的奋斗!只有选定了目标并在奋斗中感到自己的努力没有虚掷,这样的生活才是充实的,精神也会永远年轻。——路遥《平凡的世界》</p>

        </div>

        <div class="word">

            <p>生活啊,生活!你有多少苦难,又有多少甘甜!天空不会永远阴暗,当乌云退尽的时候,蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比,花朵仍然会蓬勃开放。——路遥《平凡的世界》</p>

        </div>  

    </div>

</body>

 

</html>

登录后复制

运行效果如下:

360截图16240203589589.png

如果我们把CSS代码.word:first-of-type改成p:first-of-type,结果会是如何呢,从字面上看好像是第一个p标签的字体会变红色

修改CSS代码:

1

2

3

p:first-of-type{

    color:red;

}

登录后复制

运行结果如下:

2.png

从结果看,我们发现所有的段落字体都变红色了,为什么呢,哦,原来是因为每个p都是.word 容器的第一个子元素!

我们在第一个.word容器里再添加一个p看下结果:

1

2

3

4

<div class="word">

            <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>

            <p>只有自己诚心待人,别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>

        </div>

登录后复制

运行结果为:

3.png

所以看出p:first-of-type这段样式代码真正的意思是所有在容器中为第一个子元素的且类型为P标记的元素!!!

总结:

1、学习了结构性伪类选择器—first-of-type的用法,它的作用就是用来匹配指定类型且位置父容器中第一个子元素的所有这些元素,结果可以有多个!!!

以上是CSS3中结构性伪类选择器—:first-of-type实现名言标签(代码实例 )的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

两个点博物馆:邦格荒地地点指南
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

纯CSS3怎么实现波浪效果?(代码示例) 纯CSS3怎么实现波浪效果?(代码示例) Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果?(代码示例)

巧用CSS实现各种奇形怪状按钮(附代码) 巧用CSS实现各种奇形怪状按钮(附代码) Jul 19, 2022 am 11:28 AM

巧用CSS实现各种奇形怪状按钮(附代码)

css怎么隐藏元素但不占空间 css怎么隐藏元素但不占空间 Jun 01, 2022 pm 07:15 PM

css怎么隐藏元素但不占空间

原来利用纯CSS也能实现文字轮播与图片轮播! 原来利用纯CSS也能实现文字轮播与图片轮播! Jun 10, 2022 pm 01:00 PM

原来利用纯CSS也能实现文字轮播与图片轮播!

css3怎么实现花边边框 css3怎么实现花边边框 Sep 16, 2022 pm 07:11 PM

css3怎么实现花边边框

css3什么是自适应布局 css3什么是自适应布局 Jun 02, 2022 pm 12:05 PM

css3什么是自适应布局

css3如何实现鼠标点击图片放大 css3如何实现鼠标点击图片放大 Apr 25, 2022 pm 04:52 PM

css3如何实现鼠标点击图片放大

css3动画效果有变形吗 css3动画效果有变形吗 Apr 28, 2022 pm 02:20 PM

css3动画效果有变形吗

See all articles