乔越

发表文章数:122

四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 编程语言 » HTML » 【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

伪类选择器

伪类选择器是一种允许通过未包含在 HTML 元素的状态信息来定位 HTML 元素的用法。伪类选择器的具体用法就是向已有的选择器增加关键字,表示定位的 HTML 元素的状态信息。

伪类选择器的语法结构如下所示:

选择器:伪类 {
   属性 : 属性值;
}

伪类选择器的具体语法格式为 :伪类,这里一定不要忘记 :

说明:CSS 允许在同一个选择器上同时编写多个伪类选择器。

伪类选择器种类

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

提示:上图由 MDN 网站提供

伪类选择器的数量这么多,为了更好地梳理伪类选择器,我们可以按照用途的不同分为如下 5 种类型:

  1. 动态伪类选择器:常与 “ 元素配合使用,用来表示用户的某种行为状态。
  2. 目标伪类选择器:常与 “ 元素配合使用,用来定位当前 HTML 页面中唯一一个目标元素。
  3. 元素状态伪类选择器:常与表单组件元素配合使用,用来表示表单组件的某种状态。
  4. 结构伪类选择器:常与 “ 元素配合使用,利用 HTML 元素之间的关系定位目标元素。
  5. 否定伪类选择器:用来定位与指定选择器不匹配的 HTML 元素。

否定伪类选择器

:not(selector) {
    属性 : 属性值;
}

否定伪类选择器的作用是用来定位不匹配 selector 选择器定位的 HTML 元素的元素。可能这句话看起来比较绕,不太好懂。

注意

  • 可以利用这个伪类提高规则的优先级。例如, #foo:not(#bar) 和 #foo 会匹配相同的元素。 但是前者的优先级更高。
  • :not(foo) 将匹配任何非 foo 元素,包括 html 和 body 元素。
  • 这个选择器只会应用在一个元素上,你无法用它排除所有父元素。

此内容摘自 MDN 网站的否定伪类选择器文章

伪元素选择器

CSS 中伪元素选择器的用法与伪类选择器的用法类似,都是在指定 CSS 选择器增加关键字。但这两者的作用并不相同,伪类选择器是用来描述某个指定元素的状态信息,而伪元素选择器是用来描述某个指定元素的特定部分设定样式。

伪元素选择器的语法结构如下所示:

/* CSS3 语法 */
选择器::伪元素 {
  属性 : 属性值;
}
/* CSS2 过时语法 (仅用来支持 IE8) */
选择器:伪元素 {
  属性 : 属性值;
}

伪元素选择器的语法格式为 ::伪元素,一定不要忘记 ::

目前 CSS 提供的伪元素选择器的数量如下所示:

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

::before 和 ::after 伪元素

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素

a::before {
  content: "♥";
}

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

a::after {
  content: "→";
}

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

内容生成

content 属性用于在元素的 ::before 伪元素和 ::after 伪元素中插入内容。该属性具有的值如下所示:

  • none:不会产生伪类元素。
  • normal:::before 伪元素和 ::after 伪类元素中会被视为 none。
  • text:文本内容。
  • url:格式为 url(),指定一个外部资源(比如图片)。如果该资源或图片不能显示,它就会被忽略或显示一些占位。

由 content 属性增加的内容默认情况下为内联元素(有关内联元素的内容会在后续章节中进行详细讲解)。

::first-letter 伪元素

::first-letter 伪元素的作用是为匹配元素的文本内容的第一个字母设置样式内容

p::first-letter {
  font-size: 130%;
}

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

参看 MDN 网站的 ::first-letter 伪元素文章

::first-line 伪元素

::first-line 伪元素的作用是为匹配 HTML 元素的文本内容的第一行设置样式内容

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

参看 MDN 网站的 ::first-line 伪元素文章

::selection 伪元素

::selection 伪元素的作用是匹配用户在 HTML 页面选中的文本内容(比如使用鼠标或其他选择设备选中的部分)设置高亮效果

p::selection {
    color: gold;
    background-color: red;
}

【学习笔记】css伪类选择器,伪元素选择器基础知识点复习

只有一小部分 CSS 属性可以用于::selection 伪元素:

  • color 属性
  • background-color 属性
  • cursor 属性
  • caret-color 属性
  • outline 属性
  • text-decoration 属性
  • text-emphasis-color 属性
  • text-shadow 属性

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《【学习笔记】css伪类选择器,伪元素选择器基础知识点复习》 发布于2020-01-02

分享到:
赞(1) 打赏 生成海报

评论 6

7 + 5 =
  1. #1

    学习了

    华为云折扣购买5个月前 (02-27)回复
  2. #2
    qq_avatar

    确实不错 学习了 谢谢

    云龙建站笔记5个月前 (03-09)回复
  3. #3
    qq_avatar

    不错的网站支持一下

    华为质疑4个月前 (04-22)回复
  4. #4
    qq_avatar

    不错 我研究下

    菜鸟IT资源网3个月前 (04-25)回复
  5. #5
    qq_avatar

    看看确实不错支持一下

    华为质疑3个月前 (04-29)回复
  6. #6

    学习一下确实不错

    华为质疑1个月前 (07-01)回复

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册