html伪类与伪元素选择器

什么是伪类:

伪类用于定义元素的特殊状态。

例如,它可用于:

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

伪类的用法:伪类:{

                                    }

伪类的种类:

/*链接伪类*/ 注意:link:visited:target是作用于链接元素的!

:link 表示作为超链接,并指向一个未访问的地址的所有锚

扫描二维码关注公众号,回复: 3758968 查看本文章

:visited 表示作为超链接,并指向一个已访问的地址的所有锚

:target 代表一个特殊的元素,它的idURI的片段标识符

/*动态伪类*/ 注意:hover:active基本可以作用于所有的元素!

:hover 表示悬浮到元素上

:active 表示匹配被用户激活的元素(点击按住时)

/* 隐私与:visited选择器*/

只有下列的属性才能被应用到已访问链接:

color

background-color

border-color

由于a标签的:link:visited可以覆盖了所有a标签的状态,所以当:link:visited:hover:active同时出现在a标签

身上时 :link:visited不能放在最后!!!

所以一般顺序为:LVHA

/*表单相关伪类*/

:enabled 匹配可编辑的表单

:disable 匹配被禁用的表单

:checked 匹配被选中的表单

:focus 匹配获焦的表单

/*结构性伪类*/

i下面的ndex的值从1开始计数!!!!

index可以为变量n(只能是n)

index可以为even odd

#wrap ele:nth-child(index) 表示匹配#wrapindex的子元素 这个子元素必须是ele

                   

#wrap ele:nth-of-type(index) 表示匹配#wrap中第indexele子元素

    

:nth-child(index)系列

:first-child

           比如:  P:first-child 选中的是,每个标签的第一个儿子是p的标签!

:last-child   

           比如:  P:first-child 选中的是,每个标签的最后一个儿子是p的标签!

: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))

除此之外:nth-child和:nth-of-type有一个很重要的区别!!

个人总结:nth-of-type以儿子元素为中心,nth-child是以父亲元素为中心!!!

         解释:如果父亲元素参杂其他元素,nth-child会将其他元素也算进去,但是nth-of-type不会

         例子:

                                                       

        结论:都是2,但是结果却不同

:not

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

/*伪元素*/

::after  在元素最后添加内容  内容添加:content:“要添加的内容”

::before   在元素最前添加内容  内容添加:content:“要添加的内容”

::firstLetter 选择文本的第一个单词

::firstLine  选择文本的第一行

::selection 就是选择文本时(就是要复制时触发)

       

                                                                                                                                     以上是自己以前学习的心得,然后又更新和解释

  

猜你喜欢

转载自www.cnblogs.com/zhangjiayimy/p/9876440.html