CSS Pseudo-Element Selectors伪对象选择符

一:

CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的写法仍然有效。

为了支持IE8,许多目前许多情况还是使用单个冒号,显示效果一样

Selectors
选择符
CSS Version
版本
Description
简介
E:first-letter/E::first-letter CSS1/CSS3 设置对象内的第一个字符的样式。
E:first-line/E::first-line CSS1/CSS3 设置对象内的第一行的样式。
E:before/E::before CSS2/CSS3 设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E:after/E::after CSS2/CSS3 设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用
E::selection CSS3 设置对象被选择时的颜色。

1.E:first-letter/E::first-letter{ sRules }

设置对象内的第一个字符的样式。

/*
* IE7及以上,Google,FF都支持
*/
p:first-letter {
font-size: 2em;
color: red;
}
/*
* Css3 使用 双冒号标识,IE8及以下浏览器不支持
*/
p::first-letter {
font-size: 2em;
color: red;
}

CSS Pseudo-Element Selectors伪对象选择符

2.E:first-line/E::first-line{ sRules }

设置对象内的第一行的样式。

注意:当前伪元素属性 只针对当前元素的文本内容有效

/*
* IE7及以上,Google,FF都支持
*/
p:first-line {
color: red;
}
/*
* Css3 使用 双冒号标识,IE8及以下浏览器不支持
*/
p::first-line {
color: red;
}

CSS Pseudo-Element Selectors伪对象选择符

3.E:before/E::before{ sRules }

设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用,

在当前元素树结构的前面,添加一个元素,并制定元素的内容(只支持纯文本)

/*
* 在当前元素树结构的前面,添加一个元素,并制定元素的内容
* IE8及以上浏览器、Google,FF都支持该伪元素
*/
p:before {
position: absolute;
background: #fff;
color: red;
content: "如果你的能看到这段文字,说明你的浏览器只支持E:before";
font-size: 14px;
border:1px solid red;
}
/*
* 在当前元素树结构的前面,添加一个元素,并制定元素的内容
* IE9及以上浏览器、Google,FF都支持该伪元素
*/
p::before {
position: absolute;
background: #fff;
color: red;
content: "如果你的能看到这段文字,说明你的浏览器只支持E:before";
font-size: 14px;
border:1px solid red;
}

CSS Pseudo-Element Selectors伪对象选择符

4.E:after/E::after{ sRules }

设置在对象后(依据对象树的逻辑结构)发生的内容

使用方法同上

/*
* 在当前元素树结构的前面,添加一个元素,并制定元素的内容
* IE8及以上浏览器、Google,FF都支持该伪元素
* 如果当前元素使用定位,则伪元素的定位是相对于当前元素的
*/
p:after {
position: absolute;
top:0px;
background: #fff;
color: red;
content: "如果你的能看到这段文字,说明你的浏览器只支持E:before";
font-size: 14px;
border: 1px solid red;
}

CSS Pseudo-Element Selectors伪对象选择符

5.E::selection{ sRules }

设置对象被选择时的样式。主要是文本样式
/*
* 设置选中文本的样式
* IE9及以上支持,Google支持,但是 FF浏览器,不支持标准模式需要加前缀
*/
p::selection {
background: #111;
color: red;
}
p::-moz-selection {
background: #111;
color: red;
/*以下属性不起作用*/
border: 1px solid red;
font-size: 30px;
}

CSS Pseudo-Element Selectors伪对象选择符

上一篇:Spring Boot 获取yaml配置文件信息


下一篇:#8.10.16总结# 属性选择符 伪对象选择符 CSS的常用样式