css伪类和伪元素

原创已于 2023-10-15 15:47:26 修改 · 191 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

于 2023-10-12 14:13:19 首次发布

本文详细介绍了CSS中的伪类（如链接状态和元素选择器）以及伪元素（如first-letter、before和after的用法），展示了如何使用它们来增强HTML元素的样式和交互效果。

1.1伪类

1.1.1定义

伪类用于向某种选择器添加特殊效果

1.1.2超链接伪类

给a连接添加几种状态

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

1.1.3元素获取

:first-child  /* 第一个子元素 */
:last-child  /* 最后一个子元素 */
:only-child /* 只有一个子元素 */
:root  /* 根标签 */
:nth-child(n)   /* 第几个子元素 */
ul li:nth-child(1){color:#f00;}   /* 第一个子元素 - 从1开始 */ 
ul li:nth-child(2n){color:#f00;} /* 偶数行的子元素 - 2的倍数的所有元素 */ 
:nth-child(odd)  /* 奇数元素 */
:nth-child(even)  /* 偶数元素 */
:nth-last-child(-n+4) /* 后4个元素 */

1.2伪元素

1.2.1定义

css伪元素是用来添加一些选择器的特殊效果。最好用双冒号，防止与伪类混淆

1.2.2first-letter首字母

first-letter伪元素用于向文本的首字母设置特殊样式

其他常见的伪元素选择器

::first-line 首行
::first-letter 首字母
::before 元素前插入
::after 元素后插入

1.2.3before和after的用法总结

before定位的基准是其主元素的右上角，after定位的基准是主元素的结尾处

当主元素没有内容时before与after仍会正常⼯作，属性为行内元素，若需要设置⾼宽度等属性需要首先设置为块元素。

content是伪元素必需的属性。若伪元素没有内容，需赋值为空格：content:' '; before与after的主要⽤途是对元素默认样式的的美化：美化时需要结合定位于内容。⼀般讲主元素设置为position：relative，伪元素设置为position：absolute，以⽅便对伪元素定位。

a:hover::before,
a:hover::after {
    position: absolute;
}

a:hover::before {
    content: "我是前"; left: -20px;
}

a:hover::after {
    content: "我是后"; right: -20px;
}