Web前端——CSS伪类和伪元素

 CSS伪类：

1.伪类的概念：

        可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

2.伪类的语法：

        标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}

 /* 鼠标覆盖在元素上面显示红色 */
        div:hover{
            background-color: red;
        }

3.伪类的常用实例

• 设置鼠标悬停在元素上时的样式
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

4.常用伪类：

伪类选择器	例子	作用
:hover	a:hover	鼠标覆盖在元素上状态
:active	a:active	鼠标在元素上并按下左键
:link	a:link	元素链接点击前的样式
:visited	a:visited	元素链接点击后的样式
:focus	input:focus	获取焦点的样式
:frst-child	li:first-child	第一个子级
:frst-of-type	ul li:first-of-type	特定的第一个子级
:last-child	li:last-child	最后一个子级
:last-of-type	ul li:last-child	特定的最后一个子级
:nth-child(n)	li:nth-child(2n)	第n个子元素（2n为2的倍数）
:nth-of-type(n)	li:nth-of-type(3n+1)	指定类型的第n个子元素（3n+1为3的倍数+1）
:nth-last-child(n)	li:nth-last-child(n)	倒数第n个子元素
:nth-last-of-type(n)	li:nth-last-of-type(n)	指定类型的倒数第n个子元素

    
    
    
    
    


    

    CSDN
    

    
    

        
送给各位同学
        
劝学诗
        
书中自有千钟粟。
        
书中自有黄金屋。
        
书中有马多如簇。
        
书中自有颜如玉。
    

CSS伪元素：

1. 伪元素的概念：

        可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。

2.伪元素的语法：

        标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}

p::before{
            content:"大家好，我是";
            color:orange;
        }

3.伪元素的常用实例：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容

4.常用伪元素：        

伪元素选择器	例子	作用
::before	p::before	在元素前插入内容
::after	p::after	在元素后插入内容
::selection	p::selection	选择用户选择的元素部分
::frst-line	div::first-line	文本的第一行样式
::first-letter	div::first-letter	选择文本的首字母，只用于块元素
::placeholder	input::placeholder	只用于表单的提示文本

    
    
    
    
    


    
伪元素
    
富家不用买良田,书中自有千钟粟。安居不用架高堂,书中自有黄金屋。出门莫恨无人随,书中车马多如簇。娶妻莫恨无良媒,书中自有颜如玉。男儿若遂平生志,六经勤向窗前读