css伪类、伪元素学习笔记

什么是伪类

是一种CSS的内置类,名字叫伪类(不要纠结为什么叫伪类,就跟人的名字一样),她被赋予了一些特性和功能:可以不用选择器就能拿来用。
伪类则是像真正的类一样发挥这类的作用,没有数量上的限制,只要不互相排斥也能用到相同的元素上。
官方解释是:伪类对元素的名称、属性、内容以外的特征进行分类。伪类可以是动态的,当用户与元素进行交互时元素可能触发伪类。

什么是伪元素

可以想象成一种元素,一种不能直接用css其他写法表示出来的。比如你想用css获取一篇文字的第一个字母,或者第一行,这个时候光用普通的选择器很难实现,这时候就是伪元素显身手的时候了。伪元素是选中某个元素符合逻辑却实际上不存在的部分
到目前为止,伪元素在一个选择器里只能出现一次,并且只能出现在末尾

原文说明

  • Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document (e.g., the :before and :after pseudo-elements give access to generated content).

  • Pseudo-classes classify elements on characteristics other than their name, attributes or content; in principle characteristics that cannot be deduced from the document tree. Pseudo-classes may be dynamic, in the sense that an element may acquire or lose a pseudo-class while a user interacts with the document. The exceptions are ‘:first-child’, which can be deduced from the document tree, and ‘:lang()’, which can be deduced from the document tree in some cases

    写法上的区别

    CSS3为了区分这两者。在语法上作出了区别:

    1
    2
    3
    4
    5
    6
    div:first-child{
    //一个冒号是伪类
    }
    div::first-line{
    //两个冒号是伪元素
    }

元素优先级

分开各自作为真正的类和元素计算。

标准伪类索引(不包括实验中的API)

  • :active:
    匹配配用户激活的元素。他代表按下到松开之间的时间。一般用于a标签访问过的颜色。

  • :last-of-type
    表示在他父元素的子元素列表中,最后一个元素。

  • :left
    这个需要和@page配套使用,设置打印文档左侧的css样式。没用过不多说

  • :link
    用来选中元素中的链接,她会选中所有尚未访问的链接,包括那些已经被其他伪类选中的(比如: hover、active、visited)。所以link伪类应该放到其他伪类前面。并遵循:LVHA、即link->visited->hover->active

  • :checked
    标识任何处于选中状态的radio。

  • :not
    用来匹配不符合一组选择器的元素。

    1
    2
    3
    4
    // 选择所有不是P的元素
    :not(p){
    color: red
    }
  • :default
    表示一组相关元素中的默认表单元素。

  • :nth-child(an+b)
    这个伪类首先找到所有当前元素的兄弟元素,然后按照位置选后顺序从一开始,选择结果是括号中的表达式。

    • 0n+3 or 3 都匹配第三个元素
    • 1n or n 匹配每个元素
    • 2n 匹配偶数2 4 6 8的元素,可用even代替。
    • 2n+1 匹配奇数1 3 5 7的元素,可用odd代替。
      注意:a、b都必须为整数,an必须写在b的前面。
  • :nth-last-child()
    从兄弟节点中从后往前匹配处于某些位置的元素,这个伪类和 :nth-child 基本一致, 但它是从结尾计数, 而不是从开始计数.

  • :defined
    表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素.

  • :disabled
    表示任何被禁用的元素。如果一个元素不能被激活(如选择、点击或接受文本输入)或获取焦点,则该元素处于被禁用状态。

  • nth-last-of-type(an+b)
    匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素,其中 n 为正值或零值。它基本上和 :nth-of-type 一样,只是它从结尾处反序计数,而不是从开头处。

  • :empty
    代表没有子元素的元素。子元素只可以是元素节点或文本(包括空格)

  • :nth-of-type
    这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。

  • enabled
    表示任何被启用的(enabled)元素。如果一个元素能够被激活(如选择、点击或接受文本输入),或者能够获取焦点,则该元素是启用的。

  • :only-child
    匹配没有任何兄弟元素的元素.

  • :first
    打印文档的时候,第一页的样式。打印的属性不多说。

  • :only-of-type
    代表了任意一个元素,这个元素没有其他相同类型的兄弟元素。

  • first-child
    表示在一组兄弟元素中的第一个元素

  • :first-of-type
    表示一组兄弟元素中其类型的第一个元素,比如父元素内混合着p和div,这个就能拿到第一个p或者第一个div

  • :out-of-range
    表示一个input元素,其当前值属于min和max之外的时候。

  • :in-range
    代表一个input元素,其当前值处于属性min和max限定的范围之间。

  • :fullscreen
    应用于当前处于全屏显示模式的元素,他能选择顶级元素,还包括所有已经显示的栈内元素。

  • :focus
    表示获得焦点的元素。用户点击或者触摸或者键盘tab选择到他时会被触发。

  • :read-only
    表示不可以被用户编辑的元素。

  • :read-write
    表示可以编辑的元素。

  • focus-within
    表示一个元素获取焦点,或者该元素的后代元素获得焦点。 换句话说自身或者她的某个后代匹配:focus伪类。

  • :root
    匹配文档树的根元素。对于html来说:root匹配< html>元素,除了优先级更高之外与html选择器相同。

  • hover
    适用于用户使用指示设备虚指一个元素(没有激活的情况)。

  • indeterminate
    表示状态不确定的表单元素。

    1. checkbox元素的indeterminate属性被设置为true
    2. radio元素拥有相同name值得所有单选按钮都未被选中
    3. 处于不确定状态的progress元素
  • invalid
    表示任意内容未通过验证的 < input> 或其他 < form> 元素 .

  • :visited
    表示用户已经访问过的链接。

  • :last-child
    代表父元素的最后一个子元素

感谢您的阅读。 🙏