• 技术文章 >web前端 >css教程

    css中一个冒号和两个冒号分别代表什么?

    VV2020-06-29 17:51:11转载1076

    一个冒号是伪类,两个冒号是伪元素。

    (推荐学习:css快速入门

    伪类可以独立于文档的元素来分配样式,且可以分配给任何元素,逻辑上和功能上类类似,但是其是预定义的、不存在于文档树中且表达方式也不同,所以叫伪类。

    伪元素所控制的内容和一个元素控制的内容一样,但是伪元素不存在于文档树中,不是真正的元素,所以叫伪元素。

    伪类有::first-child ,:link:,vistited,:hover:,active:focus,:lang

    伪元素有::first-line,:first-letter,:before,:after

    伪类和伪元素的区别:

    伪类

    伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id、class、属性等静态的标志。

    由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

    :link

    伪类将应用于未被访问过的链接,与:visited互斥。

    :hover

    伪类将应用于有鼠标指针悬停于其上的元素。

    :active

    伪类将应用于被激活的元素,如被点击的链接、被按下的按钮等。

    :visited

    伪类将应用于已经被访问过的链接,与:link互斥。

    :focus

    伪类将应用于拥有键盘输入焦点的元素。

    :first-child

    伪类将应用于元素在页面中第一次出现的时候。

    :lang

    伪类将应用于元素带有指定lang的情况。

    伪元素

    与伪类针对特殊状态的元素不同的是,伪元素是对元素中的特定内容进行操作,它所操作的层次比伪类更深了一层,也因此它的动态性比伪类要低得多。

    实际上,设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行,选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的,但是它本身只是基于元素的抽象,并不存在于文档中,所以叫伪元素。

    ::first-letter

    伪元素的样式将应用于元素文本的第一个字(母)。

    ::first-line

    伪元素的样式将应用于元素文本的第一行。

    ::before

    在元素内容的最前面添加新内容。

    ::after

    在元素内容的最后面添加新内容。

    ::before和::after通常与CSS内容生成配合使用。

    以上就是css中一个冒号和两个冒号分别代表什么?的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:css 冒号
    上一篇:table 中 cellspacing 与 cellpadding 区别 下一篇:css3如何画出小黄人并实现动画效果?(代码示例)
    大前端线上培训班

    相关文章推荐

    • css双冒号是什么意思• CSS中单位px、rem、em浅析• CSS Position 属性值有哪些?• CSS文件的扩展名是什么?• css3新增伪类有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网