css伪元素选择器有哪些（css中伪元素选择器主要使用）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

伪元素选择器并不是针对真正的元素使用的选择器,伪元素选择器只针对CSS中已有的伪元素起作用。

１、 :first-letter :该选择器对应的CSS样式对指定对象内的第一个字符起作用。
２、:first-line : 该选择器对应的CSS样式对指定对象内的第一行起作用。
３、:before : 该选择器与内容的属性结合使用，用于在指定对象内部的前端插入内容。
4、:after : 该选择器与内容的属性结合使用，用于在指定对象内部的尾端添加内容。
下面先看：first-letter微元素选择器的用法。：first-letter选择器仅对块元素（例如：<div…/>、<p…/>、<section…/>）起作用。如果想对行内元素（如：<span…/>）使用该属性，必须先设定对象的hei***、width属性，或者设定position属性为absolute，或者设定display属性为block。通过该选择器配合font-size、float属性可制作首字下沉效果。
代码如下：

讯享网

效果如图：

讯享网
:first-line选择器同样只对块元素起作用。如果要对行内元素使用该属性，必须先设定对象的height、width属性，或者设定position属性absolute，或者设定display属性为block。
:first-line伪元素选择器始终对第一行内容发挥作用，而不管这里的第一行是通过 br />元素控制换行，还是页面内容超过容器宽度所导致的换行。
:before、:after两个伪元素选择器需要与内容相关的属性结合使用，因此这里先介绍内容相关的属性。

结构性伪类选择器指定是根据HTML元素之间的结构关键进行筛选的伪类选择器。结构性伪类选择器有如下几种：
Selector:root:匹配文档的根元素。在HTML文档中，根元素永远是<html…/>元素。
Selector:first-child:匹配符合Selector选择器，而且必须是其父元素的第一个子元素的第一个子节点的元素。
Selector:last-child:匹配符合Selector选择器，而且必须是其父元素的最后一个子元素的第一个子节点的元素。
Selector:nth-child:匹配符合Selector选择器，而且必须是其父元素的第n个子元素的第一个子节点的元素。
Selector:nth-last-child:匹配符合Selector选择器，而且必须是其父元素的倒数第n个子元素的第一个子节点的元素。
Selector:nth-child（odd/even）:匹配符合Selector选择器，而且必须是其父元素的第奇数个/偶数个子节点的元素。
Selector:nth-last-child（odd/even）:匹配符合Selector选择器，而且必须是其父元素的倒数第奇数个/偶数个子节点的元素。

效果如图：
奇数节点偶数节点

UI元素状态伪类选择器主要用于根据UI元素的状态进行筛选。UI元素状态伪类选择器有如下几个：
Selector:line 匹配Selector选择器且未被访问前的元素（通常只能是超链接）。
Selector:hover: 匹配Selector选择器且处于鼠标悬停状态的元素。
Selector:focus:匹配Selector选择器且得到焦点的元素。
代码如下：

讯享网

立体效果是一种很简单的CSS效果，其原理是通过为其增加４个边框实现，其中左、上边框的颜色稍浅，而下、右边框的颜色稍深。
下面将这种立体效果定义成一个整体的CSS样式效果，然后通过鼠标点击事件触发。
代码如下：

讯享网

触发前效果图：
未触发
出发后效果图：
触发后

css伪元素选择器有哪些（css中伪元素选择器主要使用）

相关推荐