伪类选择器

  • 概念

作用：选中特殊状态的元素。
如何理解“伪”？-虚假的，不是真的。
如何理解“伪类”？-像类（class），但不是类，是元素的特殊状态。

  • 常用伪类选择器

一、动态伪类：

  1. :link超链接未被访问的状态。
  2. :visted超链接访问过的状态。
  3. :hover鼠标悬停在元素上的状态。
  4. :active元素激活的状态。
  5. :focus获取焦点的元素。

表达类元素才能使用:focus伪类。
当用户：点击元素、触摸元素、或通过键盘的“tab”建等方式，选择元素时，就是获得焦点。

二、常用结构伪类：

  • 常用的
  1. :first-child所用兄弟元素中的第一个。
  2. :last-child所有元素中的最后一个。
  3. :nth-child(n)所有兄弟元素中的第n个。
  4. :first-of-type所有同类型兄弟元素的第一个。
  5. :last-of-type所有同类型兄弟中的最后一个。
  6. :nth-of-type(n)所有同类型兄弟元素中的第n个。

三、否定伪类：

:not(选择器)派纯满足括号中条件的元素。

四、UI伪类

  1. :checked被选中的复选框或单选框按钮。
  2. :enable可用的表单元素（没有didabled属性）。
  3. :disabled不可用的表单元素（有didabled属性）。

伪元素选择器

  • 作用：选中元素中的一些特殊位置。
  • 常用伪元素：
    1. ::first-letter选中元素中的第一个文字。
    2. ::first-line选中元素中的第一行文字。
    3. ::selection 选中被鼠标选中的内容。
    4. ::placeholder选中输入框的提示文字。
    5. ::before在元素最开始的位置，创建一个子元素（必须用content属性指定内容）。
    6. ::after在元素最后的位置，创建一个子元素（必须用content属性指定内容）。

选择器优先级

CSS选择器优先级是指当多个CSS规则应用于同一个元素时，用来决定哪个规则生效的顺序。优先级从高到低依次为：

一、内联样式（Inline styles）

  • 内联样式是直接在HTML元素的style属性中定义的样式。例如<div style="color: red;">内容</div">，这种样式具有最高的优先级，因为它直接作用于元素本身，能够覆盖外部样式表和内部样式表中的其他选择器定义的样式。

    • 二、ID选择器（ID selectors）

  • ID选择器使用#加元素的ID值来选择元素，如#header{background-color: blue;}。在页面中，ID应该是唯一的，所以ID选择器的优先级很高。它仅次于内联样式，能够覆盖类选择器、属性选择器等定义的样式。

    • 三、类选择器、属性选择器和伪类选择器（Class selectors, Attribute selectors, and Pseudo-classes）

    1. 类选择器：使用.加类名来选择元素，如.container{width: 100px;}。它可以为具有相同类名的多个元素设置统一的样式。
    2. 属性选择器：通过元素的属性来选择元素，例如input[type="text"]{border: 1px solid black;}，它选择所有type属性为text的input元素。
    3. 伪类选择器：用于定义元素的特殊状态，如:hover（鼠标悬停时）、:active（元素被激活时）等，例如a:hover{color: green;}。这三者优先级相同，都高于标签选择器和通配符选择器。

      4. 四、标签选择器和伪元素选择器（Type selectors and Pseudo-elements）

      1. 标签选择器：直接使用元素的标签名来选择元素，如div{margin: 10px;}，它会选择页面上所有的div元素。
      2. 伪元素选择器：用于选择元素的特定部分，如::before和::after。例如div::before{content: "前缀";}，会在div元素内容前插入“前缀”文本。它们的优先级相同，低于类选择器等。

        3. 五、通配符选择器、继承样式和浏览器默认样式（Universal selectors, Inherited styles, and Default browser styles）

        1. 通配符选择器：使用*来选择页面上所有的元素，如*{box-sizing: border-box;}，它的优先级很低。
        2. 继承样式：某些CSS属性（如color、font-size等）会从父元素继承到子元素，这种继承而来的样式优先级也很低。
        3. 浏览器默认样式：浏览器自身为元素定义的一些初始样式，如果没有其他样式覆盖，这些默认样式会生效，它的优先级是最低的。

          4. 当优先级相同时，CSS规则的定义顺序也会影响最终生效的样式。在同一个CSS文件中，后定义的规则会覆盖先定义的规则；如果多个CSS文件同时作用于页面，后加载的CSS文件中的规则会覆盖先加载的CSS文件中的规则（前提是选择器优先级相同）。