伪元素
CSS伪元素用于向某些选择器设置特殊效果
语法格式
元素::伪元素
：：first-line
根据“first-line”伪元素中样式对Element元素的第一行文本进行格式化 只能用于块级元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 500px;margin: 0 auto;} div::first-line{color: red} </style> </head> <body> <div> 2012年11月，中国第十八届全国代表大会胜利召开，海内外各界高度关注新时期中央对港澳的方针政策会不会发生改变。 支持香港、澳门两个特别行政区发展经济、改善民生、推进民主、 促进和谐的政策也不会变。”三个“不会改变”掷地有声，给港澳同胞吃下了一颗定心丸。 </div> </body> </html>
：：first-letter
设置文本首子母的样式 只能用于块级元素、
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 500px;margin: 0 auto;} div::first-letter{color: red;font-size: 24px} </style> </head> <body> <div>
2012年11月，中国第十八届全国代表大会胜利召开，海内外各界高度关注新时期中央对港澳的方针政策会不会发生改变。
支持香港、澳门两个特别行政区发展经济、改善民生、推进民主、
促进和谐的政策也不会变。”三个“不会改变”掷地有声，给港澳同胞吃下了一颗定心丸。
</div> </body> </html>
：:before
在元素的内容前面插入新的内容 content配合使用
- 第一个子元素
- 行级元素
- 内容通过content写入
- 标签中找不到对应的标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{width: 500px;height: 100px;border: 1px solid #000;} div::before{content: "我在内容的前面"} </style> </head> <body> <div> </div> </body> </html>
：：after
在元素内容后面插入新内容，常用“content”配合使用，多用清楚浮动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> header{background: #abcdef} header::after{display: block;content: "";clear:both;} header > article{float: left;width: 40%;height: 30px;background: #f00} header > aside {float: right;width: 40%;height: 30px;background: #ff0} </style> </head> <body> <header> <article></article> <aside></aside> </header> </body> </html>
::selection
用于设置在浏览器选中文本后的前景色与背景色
兼容性
只有IE9+版本支持，在Firefox中需要加上前缀“-moz”
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div::selection{background: red;color: #ff0} </style> </head> <body> <div>selection</div> </body> </html>
