人生第一次写博客记录自己学习状况，希望以后自己能将写博客的习惯一直坚持下去，好好自我提升，好好加油！我是最棒的！

1. 伪类

1.1 什么是伪类

伪类即为同一个html标签，它在不同的状态下面会有不同的样式。伪类的表达方式通过冒号 : 来表示，例如：p:hover{}

1.2 伪类的种类

伪类的类别分为两种：动态伪类以及静态伪类

动态伪类：对所有的标签都有效的样式;

(悬停) 标签:hover -> 鼠标放在标签上时产生的样式

(焦点) 标签:focus -> 标签获得焦点的时候产生的样式

(激活) 标签:active-> 鼠标点击标签上时，且不放手的时候产生的样式

*静态伪类：只针对超链接的样式; *

(链接点击前) a:link-> 超链接被点击访问前产生的样式

(链接点击后) a:visited -> 超链接被点击访问后产生的样式

但是对于超链接的四种伪类写法在css必须要遵守以下顺序原则:

a:link {} , a:visited{} , a:hover{} , a:active{}

其次,a{}写法涵盖了了a:link{}以及a:visited{}的状态,因此a:link{},a:visited{}可以省略掉,简写在a标签里；

注意点：

在写超链接的伪类的规范性问题，a:link{},a:visited{}要不同时写，要不就都不写;

a{} 的样式是对所有的超链接和锚点；

a:link{} 的样式只对拥有href属性的超链接生效且不包含锚点；

2. 伪元素

2.1 什么是伪元素

伪元素从字面意思上来了解即为伪装的元素，所以他并不是真正的元素。伪元素是一个附加在选择器后面的关键词，可以让你对想要的元素的特定部分进行样式修改。

2.2 伪元素的使用方法

使用语法，如下：

p::first-letter {

color: red;

}

注意： 按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。

使用方法：

::first-letter

指定一个元素的第一个文字/字母的样式。

注意:所有在第一个文字/字母的标点符号都会和首个文字/字母共用该样式。

::first-line

设置元素中第一行文本的样式。

具体例子如下所示：

::before

在元素内容的最开始位置插入生成的内容。

::after

在元素内容的最后位置插入生成的内容。

具体例子如下所示：

注意:

Content属性应用也::before和::after伪元素

Content:url(“arrow.gif”) | string | attr()

Content:string

1. string里面的内容会原样显示，即使里面包含了标签.

2. 如果需要换行需要使用“\A”.

3. 如果字符串很长,则先拆分为多行再使用\对换行符转义.

Content:attr(<identifier>)的使用
<div data-before=”好的”>
  测试的
</div>
<style>
    div::before{
     Content:attr(data-before)
    }
</style>

::selection

更改被用户鼠标选择部分的样式。 具体例子如下所示：

伪元素速查表:

/* Typographic Pseudo-elements */

    ::first-line            /* 选取文字块首行字符 */

    ::first-letter          /* 选取文字块首行首个字符 */

    /* Highlight Pseudo-elements */

    ::selection             /* 选取文档中高亮(反白)的部分*/

    ::inactive-selection    /* 选取非活动状态时文档中高亮(反白)的部分*/

    ::spelling-error        /* 选取被 UA 标记为拼写错误的文本 */

    ::grammar-error         /* 选取被 UA 标记为语法错误的文本 */

    /* Tree-Abiding Pseudo-elements */

    ::before                /* 在选中元素中创建一个前置的子节点 */

    ::after                 /* 在选中元素中创建一个后置的子节点 */

    ::marker                /* 选取列表自动生成的项目标记符号 */

    ::placeholder           /* 选取字段的占位符文本(提示信息) */



    /* WebVTT Format */

    ::cue                   /* 匹配所选元素中 WebVTT 提示 */

    /* Fullscreen API */

    ::backdrop              /* 匹配全屏模式下的背景 */

前端自学之路--伪类与伪元素（第一天）