首页 > 代码库 > CSS Pseudo-Element Selectors伪对象选择符
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;}
2.E:first-line/E::first-line{ sRules }
设置对象内的第一行的样式。
注意:当前伪元素属性 只针对当前元素的文本内容有效
/** IE7及以上,Google,FF都支持*/p:first-line { color: red;}
/** Css3 使用 双冒号标识,IE8及以下浏览器不支持*/p::first-line { color: red;}
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;}
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;}
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伪对象选择符
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。