CSS中容易混淆的伪元素类型和用法
:first-of-type
匹配属于其父元素的第一个特定类型的子元素。
1.例子
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
p:first-of-type {
color: red;
}
</style>
</head>
<body>
<div>
<h1>h1文本</h1>
<p>p文本</p>
</div>
</body>
匹配父元素div的第一个 p 标签的子元素
2.first-of-type 和 first-type的区别
first-type:父元素的第一个子元素
first-of-type：其父元素的第一个特定类型的子元素。
<style>
p:last-of-type {
color: red;
}
h1:last-of-type {
color: blue;
}
</style>
</head>
<body>
<div>
<h1>h1文本</h1>
<p>p文本</p>
<h1>h1文本</h1>
<p>p文本</p>
<h1>h1文本</h1>
<p>p文本</p>
<h1>最后一个H</h1>
<p>ppppppppp</p>
</div>
</body>
执行效果：
::first-line
匹配元素中第一行的文本(只能在块元素中使用)。
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
/* 匹配元素中文本的首字母。 */
p::first-letter {
font-size: 32px;
}
p::first-line {
color: red;
}
</style>
</head>
<body>
<div>
<p>!!!ppppppppp</p>
</div>
</body>
执行效果：
温故而知新：常见块级元素
◎ address - 地址
◎ blockquote - 块引用
◎ center - 居中对齐块
◎ dir - 目录列表
◎ div - 常用块级容器，也是css layout的主要标签
◎ dl - 定义列表
◎ fieldset - form控制组
◎ form - 交互表单
◎ h1 - h6 各级标题
◎ isindex - input prompt
◎ menu - 菜单列表
◎ noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）
◎ noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
◎ ol - 排序表单
◎ p - 段落
◎ pre - 格式化文本
◎ table - 表格
◎ ul - 非排序列表（无序列表）
之所以在这里放上块级元素的回顾，是因为我英语学得比较好，想把好的学习方法迁移到前端学习中来。学习方法是多次重复，有效巩固。css的知识点复杂繁琐，遇到一次记一次，加深印象！
共同进步吧！
CSS中容易混淆的伪元素类型和用法的更多相关文章
- 知方可补不足～CSS中的几个伪元素
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了. 今天我们来说几个CSS中的伪元素,它们在 ...
- 前端开发 CSS中你所不知道的伪类与伪元素的区别--摘抄
做过前端开发的人都熟悉伪类与伪元素,而真正能够彻底了解这二者的区别的人并不多.伪类与伪元素确实很容易混淆. 伪元素主要是用来创建一些不存在原有dom结构树种的元素,例如:用::before和::aft ...
- CSS中使用文本阴影与元素阴影
文本阴影介绍 在CSS中使用text-shadow属性设置文本阴影,该属性一共有4个属性值如:水平阴影.垂直阴影.(清晰度或模糊距离).阴影颜色. text-shadow属性值说明,在文本阴影实践中: ...
- 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）
本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...
- CSS中before、after伪类选择器的巧用
大家好,今天给大家带来使用css中 before . after 实现两个效果,话不多说,我们先来看看, before 和 after 它们的作用是什么 选择器 作用 before 向选定的元素前插入 ...
- CSS（二）- 选择器 - 伪元素和伪类（思维导图）
伪元素 伪元素可以创建一些文档语言无法创建的虚拟元素.比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter.::first-line).同时, ...
- css中各种情况下的元素的垂直和水平居中的问题
问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...
- css中的字体样式及元素样式
css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...
- css常用属性初总结:伪元素和伪元素
前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...
随机推荐
- 基于netcore实现mongodb和ElasticSearch之间的数据实时同步的工具（Mongo2Es）
基于netcore实现mongodb和ElasticSearch之间的数据实时同步的工具 支持一对一,一对多,多对一和多对多的数据传输方式. 一对一 - 一个mongodb的collection对应一 ...
- IE浏览器清除缓存没用
再想买更新JS和css文件之后, 使用 internet 里面的删除选项 发现样式和事件还是没用变 最终发现 需要 按 f12 找到这个清缓存才正常解决问题
- EOS 新增的 WebAssembly 解释器，是什么鬼？
Daniel Larimer 在最近的博客中透露,EOS 新增了官方的 WebAssembly 解释器,用来解释执行 WebAssembly 智能合约,加上之前的编译执行,EOS 智能合约有了两种执行 ...
- 微软Skype Linux客户端全新发布
前两天,微软说要给“Linux 用户带来一个令人兴奋的新闻”,今天,这个新闻来了.它刚刚为 Linux 发布了一个新的 Skype 客户端. 此次发布,微软为 Linux 带来的 Skype 客户端与 ...
- Mycat 配置说明（schema.xml ）
Schema.xml 作为 MyCat中重要的配置文件之一,管理着 MyCat的逻辑库.表.分片规则.DataNode以 及DataSource.弄懂这些配置,是正确使用MyCat的前提. schem ...
- 笔记：Hibernate 持久化类标注示例-双向1-N关系映射
1-N关系的1端持久化类 package org.drsoft.hibernate.model.oneToMany; import java.util.Date; import java.ut ...
- 百度API地图的标注不居中显示，而显示在左上角
前言:今天弄个百度地图,弄了半天就是不居中,之前使用一直没有遇到这个问题.所以就一直在找原因. 百度地图对地图所在的div做了显示隐藏之类操作,标注就不再居中显示,而显示在左上角. 查了很久,有人提出 ...
- Python 中列表生成式和生成器
列表生成式 即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 举个例子,要生成list [1,2,3,4,5,6,7,8,9,10]可以用l ...
- [poj3904]Sky Code_状态压缩_容斥原理
Sky Code poj-3904 题目大意:给你n个数,问能选出多少满足题意的组数. 注释:如果一个组数满足题意当且仅当这个组中有且只有4个数,且这4个数的最大公约数是1,$1\le n\le 10 ...
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...