CSS中的伪类选择器和伪元素选择器的代码分析

不言

发布时间：2018-09-05 18:00:58

2220人浏览过

来源于php中文网

原创

本篇文章给大家带来的内容是关于CSS中伪类选择器以及伪元素选择器的介绍（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

一、链接伪类

1、链接伪类

        /*链接伪类*/        注意:link，:visited，:target是作用于链接元素的！        
        :link       表示作为超链接，并指向一个未访问的地址的所有锚        
        :visited    表示作为超链接，并指向一个已访问的地址的所有锚        
        :target     代表一个特殊的元素，它的id是URI的片段标识符

2、代码实例：
01_锚点伪类.html

点我点我点我

我是p啦

02_锚点伪类.html

03_target.html

p1 p2 p3

二、动态伪类

1、动态伪类

立即学习“前端免费学习笔记（深入）”；

        /*动态伪类*/        注意:hover，:active基本可以作用于所有的元素！        
        :hover      表示悬浮到元素上        
        :active     表示匹配被用户激活的元素（点击按住时）
注意：
由于a标签的:link和:visited可以覆盖了所有a标签的状态，所以当:link，:visited，:hover，:active同时出现在a标签身上时 :link和:visited不能放在最后！！！

2、代码实例：

我是test

三、隐私与:visited选择器

1、隐私与:visited选择器

/*隐私与:visited选择器*/只有下列的属性才能被应用到已访问链接
：    color  background-color  border-color

四、表单相关伪类

1、表单相关伪类

    /*表单相关伪类*/
    :enabled    匹配可编辑的表单    
    :disable    匹配被禁用的表单    
    :checked    匹配被选中的表单    
    :focus      匹配获焦的表单

2、代码实例：
01_表单状态.html


        
        无标题文档

02_表单状态.html


        
        无标题文档

03_获取焦点.html

04_模拟单选框.html


        
        无标题文档

四、结构性伪类

1、结构性伪类

/*结构性伪类*/index的值从1开始计数！！！！
index可以为变量n(只能是n)
index可以为even odd    #wrap ele:nth-child(index)      表示匹配#wrap中第index的子元素 这个子元素必须是ele    #wrap ele:nth-of-type(index)    表示匹配#wrap中第index的ele子元素
    除此之外:nth-child和:nth-of-type有一个很重要的区别！！
            nth-of-type以元素为中心！！！

:nth-child(index)系列         
    :first-child
    :last-child
    :nth-last-child(index)
    :only-child (相当于:first-child:last-child 或者 :nth-child(1):nth-last-child(1))
:nth-of-type(index)系列
    :first-of-type
    :last-of-type
    :nth-last-type(index)
    :only-of-type   (相当于:first-of-type:last-of-type 或者 :nth-of-type(1):nth-last-of-type(1))

:not        :empty(内容必须是空的，有空格都不行，有attr没关系)

2、代码实例：

04_not.html

not

first second third fourth fifth

05_empty.html

empty

讯飞听见会议

科大讯飞推出的AI智能会议系统

下载

Second

Third

五、伪元素

1、伪元素

/*伪元素*/
    ::after
    ::before
    ::firstLetter
    ::firstLine
    ::selection

2、代码实例：
after.html

after

伪元素

before.html

before

伪元素

firstLetter.html

First-Letter

sssss

firstLine.html

First-Line

sssss
sssss
sssss

selection.html

Selection

SelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelectionSelection

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

500

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

261

2023.07.27