伪类与伪元素

伪类与伪元素

伪类和伪元素的引入是因为在文档树里有些信息无法被充分描述，引用标准中的话就是：CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化。

文档树又称标准流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

一、常见标准流排版规则

块级元素：从上往下，垂直布局，独占一行
行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行

二、伪类

为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。
作用：设置鼠标悬停在元素上时的样式、为已访问和未访问链接设置不同的样式、设置元素获得焦点时的样式等等

1. 状态伪类：基于元素当前状态进行选择的

元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

• 常见的状态伪类
  • :link：应用于未被访问过的链接
  • :hover：应用于鼠标悬停到的元素
  • :active：应用于被激活的元素
  • :visited：应用于被访问过的链接，与:link互斥
  • :focus：应用于拥有键盘输入焦点的元素
• 注意：这几个伪类同时出现在同一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，导致效果失效。
  • a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。
    (意思是必须先写a:link 和 a:visited再写 :hover）
  • a:active 必须在 CSS 定义中的 a:hover 之后才能生效。
    (意思是必须先写a:hover再写 :active）

<style>
                 /* 未访问的链接 */
                 a:link {
                   color: red;
                 }

                 /* 已访问的链接  */
                 a:visited {
                   color: green;
                 }

                 /* 鼠标悬停链接  */
                 a:hover {
                   color: hotpink;
                 }

                 /* 已选择的链接*/
                 a:active {
                   color: blue;
                 }
             </style>

• 伪类和 CSS 类

  • 将鼠标悬停在类highlight上时，会改变颜色

     a.highlight:hover {
       color: red;
     }
    

  • 悬停在<div>上

     div:hover {
       background-color: blue;
     }
    

  • 把鼠标悬停到 <div> 元素以显示 <h1>元素（类似工具提示的效果）

     h1 {
       display: none;
       background-color: green;
       padding: 25px;
     }
    
     div:hover h1 {
       display: block;
     }
    

2. 结构伪类：css3新增选择器

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

• 作用与优势

  • 作用：根据元素在HTML中的结构关系查找元素
  • 优势：减少对HTML中类的依赖，有利于保持代码整洁
  • 场景：常用于查找某上级选择器中的子元素

• 选择器

  选择器	说明
  E:first-child{}	匹配上级元素中第一个子元素，并且是E元素
  E:last-child{}	匹配上级元素中最后一个子元素，并且是E元素
  E:nth-child(n){}	匹配上级元素中第n个子元素，并且是E元素
  E:nth-last-child(n){}	匹配上级元素中倒数第n个子元素，并且是E元素

• 元素的类型：

  :nth-of-type() 规定属于其上级元素的第n个 指定元素；
  :nth-last-of-type() 从元素的最后一个开始计算,规定属于其上级元素的指定元素；
  :first-of-type 选择一个上级元素下的第一个同类子元素；
  :last-of-type 选择一个上级元素的最后一个同类子元素；
  :only-child 选择它的上级元素的唯一一个子元素；
  :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
  :checked匹配被选中的input元素，这个input元素包括radio和checkbox。
  :empty 选择的元素里面没有任何内容。
  :disabled匹配禁用的表单元素。
  :enabled匹配没有设置disabled属性的表单元素。
  :valid匹配条件验证正确的表单元素。
  :in-range选择具有指定范围内的值的 <input> 元素。
  :optional选择不带 "required" 属性的 <input> 元素。
  :focus选择获得焦点的 <input> 元素。
  

  	<style>
  		/* 选中第一个 */
          li:first-child {
              background-color: green;
          }
          /* 最后一个 */
          li:last-child {
              background-color: green;
          }
          /* 任意一个 */
          li:nth-child(3) {
              background-color: green;
          }
          li:nth-last-child(4) {
              background-color: green;
          }
          
          /* 偶数 */
          li:nth-child(2n)
   
          /* 奇数 */
          li:nth-child(2n+1)
   
          /* 找到前5个 */
          li:nth-child(-n+5)
   
          /* 4的倍数 */
          li:nth-child(4n) {
              background-color: green;
          }
  	</style>
  

三、伪元素

创建一些不在文档树中的元素，并为其添加样式。(就是选取某些元素前面或后面这种普通选择器无法完成的工作,虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。)
作用：设置元素的首字母、首行的样式、在元素的内容之前或之后插入内容等等

1. 使用伪元素在网页中创建内容

• 伪元素：一般页面中的非主体内容可以使用伪元素

• 区别：

  • 元素：HTML设置的标签
  • 伪元素：由CSS模拟出的标签效果

• 种类

  伪元素	作用
  ::before	在元素的前面添加一个伪元素
  ::after	在元素的最后添加一个伪元素
  first-letter	选择元素的首字母
  first-line	选择元素的首行
  selection	选择元素被选中的部分

• 注意点
  1）必须设置content属性才能生效
  2）伪元素默认是行内元素
  3）CSS3 规范中有一部分要求，为了区分伪类和伪元素，伪元素使用两个冒号 (::)， 伪类使用一个冒号 (:)

2. ::first-line和::first-letter

对于::first-line和::first-letter，需要注意的是，::first-line和::first-letter 伪元素只能应用于块级元素

• 以下属性适用于 ::first-line 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

• 以下属性适用于 ::first-letter 伪元素：

  • 字体属性
  • 颜色属性
  • 背景属性
  • 外边距属性
  • 内边距属性
  • 边框属性
  • text-decoration
  • vertical-align（仅当 “float” 为 “none”）
  • text-transform
  • line-height
  • float
  • clear

3. content属性的类别

content属性	含义
none	设置 content 为空值。
normal	在 :before 和:after伪类元素中会被视为 none，即也是空值。
counter	设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是’decimal’——十进制数字）
attr(attribute)	将元素的 attribute 属性以字符串形式返回。
string	设置文本内容
open-quote	设置前引号
close-quote	设置后引号
no-open-quote	移除内容的开始引号
no-close-quote	移除内容的闭合引号
url(url)	设置某种媒体（图像，声音，视频等内容）的链接地址
inherit	指定的 content 属性的值，应该从父元素继承

需要注意的是，伪元素不是真正的 HTML 元素，它们只是 CSS 中的一种选择器，用于选中元素的某个子元素或者某个位置。因此，在 HTML 中无法直接操作伪元素，也无法使用 JavaScript 来操作伪元素。