深入理解伪类和伪元素!

立即领取

最高 ¥2000 红包 限量领取

云服务器、主机等产品通用,可叠加官网常规优惠使用 | 限时领取

前言

CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。

概念

伪类的概念

1. 规范解释

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。

2. 举例说明

当用户悬停在指定的元素时,我们可以通过 :hover 来描述这个元素的状态。虽然它和普通的 CSS 类相似,可以为已有的元素添加样式,但是它只有处于 DOM 树无法描述的状态下才能为元素添加样式,所以将其称为伪类。

【伪元素的概念】

1. 规范解释

伪元素用于创建一些不在文档树中的元素,并为其添加样式。

2. 举例说明

我们可以通过 :before 来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中

列举

【伪类列举】

1. 状态伪类

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的,因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式,而进入另一状态后,该样式就会失去。
选择器示例示例说明
:linka:link选择所有未访问链接
:visiteda:visited选择所有访问过的链接
:hovera:hover把鼠标放在链接上的状态
:activea:active选择正在活动链接
:focusinput:focus选择元素输入后具有焦点

2. 结构化伪类

结构化伪类是 CSS3 新增选择器,利用 DOM 树进行元素过滤,通过文档结构的互相关系来匹配元素,能够减少 class 和 id 属性的定义,使文档结构更简洁。
选择器示例示例说明
:first – childp:first-child选择p元素的第一个子元素
:first-of-typep:first-of-type选择每个父元素是p元素的第一个p子元素
:last-childp:last-child选择所有p元素的最后一个子元素
:last-of-typep:last-of-type选择每个p元素是其母元素的最后一个p元素
:not(selector):not(p)选择所有p以外的元素
:nth-child(n)p:nth-child(2)选择所有p元素的第二个子元素
:nth-last-child(n)p:nth-last-child(2)选择所有p元素倒数的第二个子元素
:nth-last-of-type(n)p:nth-last-of-type(2)选择所有p元素倒数的第二个为p的子元素
:nth-of-type(n)p:nth-of-type(2)选择所有p元素第二个为p的子元素
:only-of-typep:only-of-type选择所有仅有一个子元素为p的元素
:only-childp:only-child选择所有仅有一个子元素的p元素
:target#news:target选择当前活动#news元素(点击URL包含锚的名字)

3. 表单相关

选择器示例示例说明
:disabledinput:disabled选择所有禁用的表单元素
:enabledinput:enabled选择没有设置 disabled 属性的表单元素
:in-rangeinput:in-range选择在指定区域内的元素
:out-of-rangeinput:out-of-range选择不在指定区域内的元素
:validinput:valid选择条件验证正确的表单元素
:invalidinput:invalid选择条件验证错误的表单元素
:requiredinput:required选择设置 required 属性的表单元素
:optionalinput:optional选择没有 required 属性,即设置 optional 属性的表单元素
:read-onlyinput:read-only选择设置 readonly 只读属性的元素
:read-writeinput:read-write选择处于编辑状态的元素;input,textarea 和设置 contenteditable 的 HTML 元素获取焦点时即处于编辑状态。
:checkedinput:checked匹配被选中的 input 元素,input 元素包括 radio 和 checkbox
:emptyp:empty匹配所有没有子元素的 p 元素
:default匹配默认选中的元素(提交按钮总是表单的默认按钮)。
:indeterminate当某组中的单选框或复选框还没有选取状态时,:indeterminate 匹配该组中所有的单选框或复选框。
:scope匹配处于 style 作用域下的元素。当 style 没有设置 scope 属性时,style 内的样式会对整个 html 起作用。(试验阶段)

4. 语言相关

选择器作用说明
:lang(language)匹配设置了特定语言的元素。设置特定语言可以通过为了 HTML 元素设置 lang=”” 属性,设置 meta 元素的 charset=”” 属性,或者是在 http 头部上设置语言属性。实际上,lang=”” 属性不只可以在 html 标签上设置,也可以在其他的元素上设置。
:dir匹配指定阅读方向的元素。当 HTML 元素中设置了 dir 属性时该伪类才能生效。现时支持的阅读方向有两种:ltr(从左往右)和 rtl(从右往左)。目前,只有火狐浏览器支持 :dir 伪类,并在火狐浏览器中使用时需要添加前缀( -moz-dir() )(试验阶段)。

5. 其他

选择器作用说明
:root匹配文档的根元素。一般的 html 文件的根元素是 html 元素。
:fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按 F11 来打开的全屏模式,而是通过 Javascript 的 Fullscreen API 来打开的,不同的浏览器有不同的 Fullscreen API。目前,:fullscreen 需要添加前缀才能使用。

【伪元素列举】

1. 单双冒号

选择器作用说明
::before/:before在被选元素前插入内容。需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。
::after/:after在选被元素后插入内容其用法和特性与:before相似。
::first-letter/:first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。
::first-line/:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中,不能用在内联元素中。

2. 仅双冒号

选择器作用说明
::selection匹配被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加 -moz 前缀。
::placeholder匹配占位符的文本。只有元素设置了 placeholder 属性时,该伪元素才能生效。该伪元素不是 CSS 的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。在一些浏览器中(IE10 和 Firefox18 及其以下版本)会使用单冒号的形式。
::backdrop用于改变全屏模式下的背景颜色。全屏模式的默认颜色为黑色。(试验阶段)

用法

【伪类】

:first-child匹配第一个子元素。
:last-child 匹配最后一个子元素。

HTML代码如下:

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>  

CSS代码如下:

li:first-child {
  color: red; // 第一个 li 会变红
}
li:last-child {
  color: red; // 最后一个 li 会变红
}

【伪元素】

::before ::after

这两个伪元素下特有的属性 content ,用于在 CSS 渲染中向元素逻辑上的头部或尾部添加内容。注意这些添加不会改变文档内容,不会出现在 DOM 中,不可复制,仅仅是在 CSS 渲染层加入。

[String] – 使用引号包括一段字符串,将会向元素内容中添加字符串。

示例:
a::after { content: “↗”; }
attr() – 调用当前元素的属性,可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。

示例:
a::after { content:”(” attr(href) “)”; }
url() / uri() – 用于引用媒体文件。

示例:
h1::before { content: url(logo.png); }
counter() – 调用计数器,可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。

示例:
h2:before { counter-increment: chapter; content: “Chapter ” counter(chapter) “. ” }

每次看一遍的时候,都会加深对css伪类和伪元素的理解,平时没空的时候,还是要多看看多复习,不然前端面试出到这些题目就懵逼了~

赞 (9) 打赏
  • 欢迎小伙伴加入,本站原创文章交流群:进站必看
  • 本作品是由 白露博客 会员 白露 投递的作品。
  • 网络媒体或个人转载请务必署名并注明出处和链接!:http://blmoe.cn/739.html
  • 凡是原创作品,禁止再次修改后发布;任何商业用途均须联系作者。如未经授权用作他处,作者将保留追究侵权者法律责任的权利。

评论 0

收起表情
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

「赠人玫瑰,手留余香」

支付宝扫一扫打赏

微信扫一扫打赏