前言

CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟。

伪类和伪元素定义

伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。

伪元素会创建一个抽象的伪元素,这个元素不是DOM中的真实元素,但是会存在于最终的渲染树中,我们可以为其添加样式。

[重点]最常规的区分伪类和伪元素的方法是:实现伪类的效果可以通过添加类来实现,但是想要实现伪元素的等价效果只能创建实际的DOM节点。

注意伪类使用单冒号 “:” ; 伪元素使用双冒号 “::”

伪元素

伪元素可以分为排版伪元素、突出显示伪元素、树中伪元素三类。

排版伪元素

【::first-line】

设置元素中第一行文本的样式

注意只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-line中存在连接符的原因

  1. .firstLine::first-line {
  2. width: 200px;
  3. text-transform: uppercase;
  4. background: #f3f3f3;
  5. }
  6. <p class="firstLine">hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world </p>

.firstLine::first-line {
width: 200px;
text-transform: uppercase;
background: #f3f3f3;
}

hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world

虽然在DOM中看不到,但实际上,上面的这段HTML代码会通过添加虚拟标签的方式进行修改。

【::first-letter】

指定一个元素第一个字母的样式

[注意1]所有前导标点符号应与第一个字母一同应用该样式

[注意2]只能与块级元素关联

[注意3]只有当选择器部分和左大括号之间有空格时,IE6-浏览器才支持。因为first-letter中存在连接符的原因

  1. <style>
  2. .letter{
  3. width: 200px;
  4. border: 1px solid black;
  5. text-indent: 0.5em;
  6. }
  7. .letter:first-letter{
  8. font-size: 30px;
  9. float: left;
  10. }
  11. </style>
  12. <div class="letter">测试首字母下层,测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层</div>

.letter{
width: 200px;
border: 1px solid black;
text-indent: 0.5em;
}
.letter:first-letter{
font-size: 30px;
float: left;
}

测试首字母下层,测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层测试首字母下层

突出显示伪元素

突出显示伪元素表示文档中特定状态的部分,通常采用不同的样式展示该状态。如页面内容的选中。突出显示伪元素不需要在元素树中有体现,并且可以任意跨越元素边界而不考虑其嵌套结构。

【::selection】

匹配被用户选择的部分

[注意1]firefox浏览器需要添加-moz-前缀

[注意2]只支持双冒号写法

[注意3]只支持颜色和背景颜色两个样式

  1. div::selection{color: red;}

p::selection{
color:#fff;
}

树中伪元素

【::before & ::after】

::before是在源元素的实际内容前添加伪元素。::after是在源元素的实际内容后添加伪元素。当::before/::after伪元素的content属性不为'none'时,这两类伪元素就会生成一个元素,作为源元素的子元素,可以和DOM树中的元素一样定义样式。

[兼容]IE7-浏览器不支持

注意默认这个伪元素是行内元素,且继承元素可继承的属性;IE7-浏览器中必须声明!DOCTYPE,否则不起作用

  1. // content = 字符串
  2. .box:after{content:"后缀"}
  3. // content = url
  4. div:before{
  5. content: url("arrow.gif");
  6. }
  7. // content = attr
  8. <div data-before="把我现在上去"></div>
  9. div:before{
  10. content: attr(data-before);
  11. }

[特] content的内容可以直接使用 url() 引入图片

【::marker】

::markder可以用于定义列表项标记的样式。

  1. <style>
  2. .item::marker{
  3. color:green;
  4. }
  5. </style>
  6. <ul>
  7. <li class="item">Item 1</li>
  8. <li class="item">Item 2</li>
  9. <li class="item">Item 3</li>
  10. </ul>

.item::marker{
color:green;
}

  • Item 1
  • Item 2
  • Item 3

该伪元素暂时只有safari支持,尝试的话请使用safari。可以用于该伪元素的属性也有限

【::placeholder】

表示输入框内占位提示文字。可以定义其样式。

  1. ::placeholder {
  2. color: blue;
  3. }

::placeholder {
color: blue;
}

伪元素速查表

  1. /* Typographic Pseudo-elements */
  2. ::first-line /* 选取文字块首行字符 */
  3. ::first-letter /* 选取文字块首行首个字符 */
  4. /* Highlight Pseudo-elements */
  5. ::selection /* 选取文档中高亮(反白)的部分*/
  6. ::inactive-selection /* 选取非活动状态时文档中高亮(反白)的部分*/
  7. ::spelling-error /* 选取被 UA 标记为拼写错误的文本 */
  8. ::grammar-error /* 选取被 UA 标记为语法错误的文本 */
  9. /* Tree-Abiding Pseudo-elements */
  10. ::before /* 在选中元素中创建一个前置的子节点 */
  11. ::after /* 在选中元素中创建一个后置的子节点 */
  12. ::marker /* 选取列表自动生成的项目标记符号 */
  13. ::placeholder /* 选取字段的占位符文本(提示信息) */
  14. /* WebVTT Format */
  15. ::cue /* 匹配所选元素中 WebVTT 提示 */
  16. /* Fullscreen API */
  17. ::backdrop /* 匹配全屏模式下的背景 */

伪类

伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

锚点

关于锚点<a>,有常见的5个伪类,分别是:link,:hover,:active,:focus,:visited

  1. a:link{background-color:pink;}/*品红,未访问*/
  2. a:hover{background-color:lightblue;}/*浅蓝,鼠标悬停*/
  3. a:active{background-color:lightgreen;}/*浅绿,正被点击*/
  4. a:focus{background-color:lightgrey;}/*浅灰,拥有焦点*/
  5. a:visited{color:orange;}/*字体颜色为橙色,已被访问*/
  6. /*[注意]visited伪类只能设置字体颜色、边框颜色、outline颜色的样式*/

伪类顺序

对于伪类顺序,有一个口诀是love-hate,代表着伪类的顺序是link、visited、focus、hover、active。但是否伪类的顺序只能如此呢?为什么是这个顺序呢?

CSS层叠中有一条法则十分重要,就是后面覆盖前面,所以伪类的顺序是需要精心考虑的。

【1】link和visited必须在最前面,且没有先后顺序,否则link或visited的效果将覆盖 hover active focus

注意link和visited称为静态伪类,只能应用于超链接

【2】hover、active、focus这三个伪类必须是focus、hover、active的顺序,因为在focus状态下,也需要触发hover和active,而要触发active一定要先触发hover,所以active要放在hover后面

注意hover、active、focus称为动态伪类,可应用于任何元素,但IE7-浏览器不支持:focus,:hover和:active在IE6-浏览器下只支持给<a>设置

所以最终的顺序只有两种:link、visited、focus、hover、active或visited、link、focus、hover、active

  1. a:link{background-color:pink;}/*品红,未访问*/
  2. a:visited{color:orange;}/*字体颜色为橙色,已被访问*/
  3. a:focus{background-color:lightgrey;}/*浅灰,拥有焦点*/
  4. a:hover{background-color:lightblue;}/*浅蓝,鼠标悬停*/
  5. a:active{background-color:lightgreen;}/*浅绿,正被点击*/

.true_a:link{background-color:pink;}/*品红,未访问*/
.true_a:visited{color:orange;}/*字体颜色为橙色,已被访问*/
.true_a:focus{background-color:lightgrey;}/*浅灰,拥有焦点*/
.true_a:hover{background-color:lightblue;}/*浅蓝,鼠标悬停*/
.true_a:active{background-color:lightgreen;}/*浅绿,正被点击*/

测试链接伪类

UI元素伪类

UI元素伪类包括:enabled、:disabled、:checked三个,主要针对于HTML中的form元素,IE8-浏览器不支持

  1. :enabled 可用状态
  2. :disabled 不可用状态
  3. :checked 选中状态
  4. input:enabled{
  5. border: 1px solid black;
  6. background-color: transparent;
  7. }
  8. input:disabled{
  9. border: none;
  10. background-color: gray;
  11. }
  12. input:checked{
  13. outline: 2px solid lightblue;
  14. }
  15. <button onclick = "btn.disabled = false;">按钮可用</button>
  16. <button onclick = "btn.disabled = true;">按钮不可用</button>
  17. <input type="button" id="btn" value="按钮">
  18. <label>Male<input type="radio" name="sex" /></label>
  19. <label>Female<input type="radio" name="sex" /></label>

input:enabled{
border: 1px solid black;
background-color: transparent;
}
input:disabled{
border: none;
background-color: gray;
}
input:checked{
outline: 2px solid lightblue;
}

按钮可用

按钮不可用



Male

Female

结构伪类

结构伪类可分为以下3种情况,IE8-浏览器不支持

【1】:nth-child(n)、:nth-last-child(n)、first-child、last-child、:only-child

  1. E F:nth-child(n) 选择父元素的第n个子元素
  2. E F:nth-last-child(n) 选择父元素的倒数第n个子元素
  3. E F:first-child 父元素的第一个子元素,与E F:nth-child(1)等同
  4. E F:last-child 父元素的最后一个子元素,与E F:nth-last-child(1)等同
  5. E F:only-child 选择父元素中只包含一个子元素
  6. p:first-child    代表的并不是<p>的第一个子元素,而是<p>元素是某元素的第一个子元素
  7. p > i:first-child 匹配所有<p>元素中的第一个<i>元素
  8. p:first-child i    匹配所有作为第一个子元素的<p>元素中的所有<i>元素

[注]n可以是整数(从1开始),也可以是公式,也可以是关键字(even、odd)

【2】:nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-of-type

  1. E F:nth-of-type(n) 选择父元素的具有指定类型的第n个子元素
  2. E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素
  3. E F:first-of-type 选择父元素中具有指定类型的第1个子元素,与E F:nth-of-type(1)相同
  4. E F:last-of-type   选择父元素中具有指定类型的最后1个子元素,与E F:nth-last-of-type(1)相同
  5. E F:only-of-type    选择父元素中只包含一个同类型的子元素
  6. .box div:nth-of-type(even){color: red;}
  7. .box p:nth-last-of-type(3){color: green;}
  8. .box div:first-of-type{color: blue;}
  9. .box p:last-of-type{color: yellow;}
  10. .box div:only-of-type{color: pink;}

【3】:root、:not、:empty、:target

  1. :root  选择文档的根元素
  2. :not  选择除某个元素之外的所有元素
  3. :empty 选择没有子元素的元素,而且该元素也不包含任何文本节点
  4. :target   匹配锚点对应的目标元素
  5. [注意]:not选择器常用于导航之间的竖线处理,如li:not(:last-of-type)
  6. :root{color:red;}
  7. div:not{background-color: lightgrey;}
  8. p:empty{height:30px;width:30px;background:pink;}
  9. :target{color:blue;} // 当点击页面上面的锚点时,锚点到的目标元素会采用这个样式

【其它】

1、:lang() 匹配某个语言,IE7-浏览器不支持

  1. p:lang(en) 匹配语言为"en"的<p>

2、不仅可以使用单一伪类,也可以伪类结合使用

注意顺序无关

  1. div:hover:first-child{background-color: lightgreen;}
  2. div:last-of-type:active{background-color: lightblue;}

div .div:hover:first-child{background-color: lightgreen;}
div .div:last-of-type:active{background-color: lightblue;}

第一个div
第二个div

伪类速查表

  1. /* Logical Combinations */
  2. :matches() /*:any()*/ /* 匹配 集合内指定 的元素 */
  3. :not() /* 排除 满足指定关系 的元素 */
  4. :has() /* 匹配 满足指定关系 的元素*/
  5. /* Linguistic Pseudo-classes */
  6. :dir() /* 匹配 设置dir(文字书写方向)属性 的元素 */
  7. :lang() /* 匹配 设置lang(定义元素语言)属性 的元素 */
  8. /* Location Pseudo-classes */
  9. :any-link /* 匹配 任意有链接锚点 的元素*/
  10. :link /* 匹配 未处于访问记录中 的链接 */
  11. :visited /* 匹配 处于访问记录中 的链接 */
  12. :target /* 匹配 URL指向的锚点 的元素 */
  13. :scope /* 匹配 设置scoped属性的style标签 的作用域 */
  14. /* User Action Pseudo-classes */
  15. :hover /* 匹配 处于鼠标悬停状态 的元素 */
  16. :active /* 匹配 处于激活状态 的元素 */
  17. :focus /* 匹配 处于聚焦状态 的元素 */
  18. :focus-ring /* 匹配 处于聚焦状态元素 的UA样式(聚焦轮廓) */
  19. :focus-within /* 匹配 子节点处于聚焦状态 的元素 */
  20. :drop /* 匹配 处于拖拽状态 的元素 */
  21. :drop() /* 匹配 处于指定拖拽状态 的元素 */
  22. /* Time-dimensional Pseudo-classes */
  23. :current /* 匹配 处于当前状态 的定义了timeline属性的元素 */
  24. :past /* 匹配 处于过去状态 的定义了timeline属性的元素 */
  25. :future /* 匹配 处于将来状态 的定义了timeline属性的元素 */
  26. /* Resource State Pseudos */
  27. :playing /* 匹配 处于播放状态 的元素 */
  28. :paused /* 匹配 处于暂停状态 的元素 */
  29. /* The Input Pseudo-classes */
  30. :enabled /* 匹配 可以编辑 的元素 */
  31. :disabled /* 匹配 禁止编辑 的元素 */
  32. :read-only /* 匹配 内容只读 的元素 */
  33. :read-write /* 匹配 内容可编辑 的元素 */
  34. :placeholder-shown /* 匹配 显示字段占位符文本 的元素 */
  35. :default /* 匹配 页面载入默认选中 的元素 */
  36. :checked /* 匹配 选中状态 的元素 */
  37. :indeterminate /* 匹配 模糊状态 的元素 */
  38. :valid /* 匹配 输入内容通过类型验证 的元素 */
  39. :invalid /* 匹配 输入内容无法通过类型验证 的元素 */
  40. :in-range /* 匹配 输入数值符合范围 的元素 */
  41. :out-of-range /* 匹配 输入数值溢出范围 的元素 */
  42. :required /* 匹配 设置必填属性 的元素 */
  43. :optional /* 匹配 可选字段 的元素 */
  44. :user-invalid /* 匹配 用户输入内容未通过验证 的元素 */
  45. /* Tree-Structural pseudo-classes */
  46. :root /* 匹配 文档树 的根元素*/
  47. :empty /* 匹配 无子节点 的元素 */
  48. :blank /* 匹配 仅包含空格或者换行符 的元素 */
  49. :nth-child(n) /* 匹配 符合元素集合中指定位置 的元素 */
  50. :nth-last-child(n) /* 反序匹配 符合元素集合内指定位置 的元素 */
  51. :first-child /* 匹配 符合元素集合内首个 的元素 */
  52. :last-child /* 匹配 符合元素集合内末尾 的元素 */
  53. :only-child /* 匹配 无兄弟节点 的元素 */
  54. :nth-of-type(n) /* 匹配 符合元素集合中同类型指定位置 的元素 */
  55. :nth-last-of-type(n) /* 反序匹配 符合元素集合中同类型指定位置 的元素 */
  56. :first-of-type /* 匹配 每个在元素集合中初次出现 的元素 */
  57. :last-of-type /* 匹配 每个在元素集合中末次出现 的元素 */
  58. :only-of-type /* 匹配 无同类兄弟节点 的元素*/
  59. /* Fullscreen API */
  60. :fullscreen /* 匹配 全屏显示模式中 的元素 */
  61. /* Page Selectors */
  62. :first /* 打印文档时首页的样式 */
  63. :left /* 打印文档时左侧的样式 */
  64. :right /* 打印文档时右侧的样式 */

深入学习css伪类和伪元素及其用法的更多相关文章

  1. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  2. 学习css常用基本层级伪类属性选择器

    常见的css选择器包含:常用选择器.基本选择器.层级选择器.伪类选择器.属性选择器,其中常用选择器分为:1.html选择符*{}//给页面上所有的标签设置模式:2.类选择符.hcls{}//给clas ...

  3. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  4. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  5. 详解 CSS 属性 - 伪类和伪元素的区别[转]

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

  6. CSS 属性 - 伪类和伪元素

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果.这里特殊指的是两者描述了其他 cs ...

  7. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  8. CSS的伪类和伪元素

    伪类 W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2). 属性 描述 CSS :active 向被激活的元素添加样式. 1 :focus 向 ...

  9. 详解 CSS 属性 - 伪类和伪元素的区别(再也不用概念盲了!!!)

    首先,阅读 w3c 对两者的定义: CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果 ...

随机推荐

  1. MongoDB的常用命令和增查改删

    数据库操作 Mongodb MySQL 查询库 show databases | show dbs show databases 选中库 use databaseName use databaseNa ...

  2. koa 路由配置

    Koa 路由 路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET.POST 等) 组成的,涉及到应用如何响应客户端对某个网站节点的访问. 通俗的讲:路由就是根据不 ...

  3. python之三元表达式、列表推导式、生成器表达式、递归、匿名函数、内置函数

    一 三元表达式.列表推导式.生成器表达式 一 三元表达式 name=input('姓名>>: ') res='SB' if name == 'alex' else 'NB' print(r ...

  4. 百度杯”CTF比赛 九月场 123

    进去后让登录,先看源码有提示 进到user.php 后发现是空的,看了wp才知道,有bak 下载下来直接爆破 但是那个1990是蛮骚的 直接进去登录 登录成功后是空的,走fd看看是怎么过 的 改包然后 ...

  5. offsetLeft、offsetX等

    https://blog.csdn.net/w390058785/article/details/80461845

  6. [亲测]七步学会ASP.NET Core 2.0怎么发布/部署到Ubuntu Linux服务器并配置Nginx反向代理实现域名访问

    前言 ASP.NET Core 2.0 怎么发布到Ubuntu服务器?又如何在服务器上配置使用ASP.NET Core网站绑定到指定的域名,让外网用户可以访问呢? 步骤 第1步:准备工作 一台Liun ...

  7. css3学习系列之移动

    transform功能 放缩 使用sacle方法实现文字或图像的放缩处理,在参数中指定缩放倍率,比如sacle(0.5)表示缩小50%,例子如下: <!DOCTYPE html> < ...

  8. 几行c#代码,轻松搞定一个女大学生

    几行c#代码,轻松搞定一个女大学生 的作业... 哈哈,标题党了哈,但是是真的,在外面敲代码,想赚点外快,接到了一个学生的期末考试,是一个天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找 ...

  9. Django生命周期 URL ----> CBV 源码解析-------------- 及rest_framework APIView 源码流程解析

    一.一个请求来到Django 的生命周期   FBV 不讨论 CBV: 请求被代理转发到uwsgi: 开始Django的流程: 首先经过中间件process_request (session等) 然后 ...

  10. MySQL8.0-NoSQL和SQL的对比及MySQL的优势

    一.SQL VS NoSQL SQL:关系型数据库,用SQL语句来操作数据 NOSQL:非关系型数据库,NoSQL的含义是不仅仅有SQL,而实际上大多数NoSQL不用SQL来操作数据 常见的关系型数据 ...