关于伪元素选择器的使用说明

关于伪元素选择器的使用说明

1、什么叫做伪元素选择器?
和元素选择器很像,但不是一个元素;伪元素,表示页面中一些特殊的并不真实的存在的元素(特殊的位置)。
2、我们经常会用到伪元素选择器的情况?
情况一:当我们在浏览网页的时候,鼠标经过一些内容,其字体颜色和背景色需要发生改变,从而提升用户体验。
情况二:当我们的在书写HTML代码和css代码的时候,当HTML代码书写完毕,我们想在文档中某个标签前面或者末尾批量添加某些内容的时候。
情况三:首字母/词改变样式;首行改变样式的时候。
3、对应的伪元素标签有哪些及其作用?
①::selection (鼠标选中内容发生改变,目前支持字体颜色和背景色)
②::before(在元素的开始需要操作某些东西的时候)
③::after(在元素的开始需要操作某些东西的时候)
④::first-letter (用于向某元素的第一个英文字母或第一个汉字添加样式)
⑤::first-line (用于向某个元素的第一行添加样式)
4、代码样式及其展现内容(一般书写在单独的css样式表中)
①::selection
代码书写格式
关于伪元素选择器的使用说明
展现效果:

关于伪元素选择器的使用说明
②::before/after
代码书写格式
关于伪元素选择器的使用说明
展现效果
关于伪元素选择器的使用说明
③::first-letter (letter:书信/报纸 ps之前我们看到的报纸,首字母/汉字都会大写,在这里代表同样的意思)
代码书写格式
关于伪元素选择器的使用说明
展现效果
关于伪元素选择器的使用说明
④::first-line
代码书写格式
关于伪元素选择器的使用说明
展现效果
关于伪元素选择器的使用说明