伪元素

简介

1 .是一个附加至选择器末的关键词,允许对被选择元素的特定部分修改样式
2 .按照规范应该使用双冒号,而不是单冒号,为了区分伪类和伪元素
3 .

举例

1 .::first-line:改变段落首行文字的样式.这种js就做不了
2 .::first-letter:改变首字母的样式.这种js还可以勉强做
3 .::placeholder:选择表单元素的占位文本.可以自定义占位文本的样式.就是placeholder的样式

::placeholder {
  color: red;
  font-size: 1.5em;
}
//可以设置的css样式
//只有ie不支持

first-line

1 .块级元素的第一行应用样式.也就说span里面是没用的.
2 .第一行元素的字数是和以下因素有关系:元素宽度,文档宽度,文本的文字大小,文本的字体
3 .first-line不能匹配任何真实存在的html元素
4 .first-line 伪元素只能在块容器中,::first-line伪元素只能在display值为block,table-cell,table-caption中有效.其他类型中不起作用
5 .first-line伪元素选择到的元素中,只有一小部分css属性能被使用

1 .所有和字体相关的属性:font,font-kerning
2 .color
3 .所有和背景相关的属性:background-color,background-image,background-clip,background-origin,background-position,background-repeat,background-size,background-attachment,background-blend-mode
6 .所有边框属性:border,border-image,border-radius
7 .text-decoration,text-shadow,text-decoration-color,text-decoration-line,text-decoration-style,vertical-align
//不要使用这里面没有操作的属性,比如text-indent就是无效的

first-letter

1 .也是块级元素的第一行的第一个字母
2 .元素首字符的识别

1 .一些以大写双字母组合命名的语言, 比如荷兰的 IJ  . 在这种罕见情况下, 两个大写字母都理应被 ::first-letter 伪元素匹配到
2 .before,content属性结合起来可能会在元素前面注入一些文本.first-letter会匹配到这些文本的首字母

3 .可以使用的样式

1 .所有外边距属性:margin
2 .所有内边距实行:padding
3 .text-decoration,text-shadow,text-transform,letter-spacing,word-spacing,line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,vertical-align
4 .所有的字体属性
5 .所有的背景属性
6 .所有边框属性
7 .color

after,before

selection

1 .用于匹配文档中被用户高亮的部分,比如鼠标或者其他选择设备选中的部分,鼠标下滑选中

image.png

/* 选中的文本是红色背景，金黄色的字体 */
::selection {
  color: gold;
  background-color: red;
}

/*选中的是蓝色背景，白色的字体的段落*/
p::selection {
  color: white;
  background-color: blue;
}

2 .支持的css属性

1 .color
2 .background-color
3 .cursor
4 .caret-color
5 .outline
6 .text-decoration
7  .text-decoration-color
8 .text-shadow

cue

1 .这个是和字幕有关系,先不搞

slotted

1 .用于选定那些被放在html模板中的元素.仅仅适用于shadow Dom中,并且只会选择实际的元素节点,而不包括文本节点
2 .为了更好地区分未被成功填充的插槽和成功填充的插槽,
3 .https://mdn.github.io/web-components-examples/slotted-pseudo-element/

不支持的一些

1 .spelling-error:浏览器标记为不正确拼写的文本段

::spelling-error {
  color: red;
}
//可以使用的属性
1 .color
2 .background-color
3 .cursor
4 .caret-color
5 .outline
6 .text-decoration
7 .text-emphasis-color
8 .text-shadow

2 .grammar-error:语法错误.兼容性也是爆炸.都不行
3 .marker:list item的marker box，后者通常含有一个项目符号或者数字.有点平平无奇.

::marker {
  color: blue;
  font-size: 1.2em;
}

image.png

4 .backdrop:处在全屏模式的元素下的渲染的盒子:也就是说当前元素是在栈顶,在最顶层的屏幕上

/* Backdrop 只有通过 dialog.showModal() 打开对话框时会被显示 */
dialog::backdrop {
  background: rgba(255,0,0,.25);
}

placeholder

1 .支持的属性和first-line,first-letter那些一样
2 .只有ie不支持
3 .相似的其他属性

1 .placeholder-shown
2 .-webkit-input-placeholder
3 .-moz-placeholder
4 .-ms-input-placeholder