伪元素选择器:(虚假的元素,一对隐形的翅膀)
A 重点:E::before/ E::after
1- 是一个行内元素,如果想设置宽高则需要转换成块:
display:block float:* position:
2- 必须添加content,哪怕不设置内容,也需要content:""
3- E:after/E:before 在旧版本里是伪元素,新版本下E:after、E:before会被自动识别为
E::before/E::after,按伪元素来对待,这样做的目的是用来做兼容。
4- E::before 定义在一个元素的内容之前插入content属性定义的内容与样式。
5- E:after 定义在一个元素的内容之后,插入content舒心定义的内容与样式。
注意:IE6,7,8不支持
B- E::first-letter 文本汇总第一个字母或字(不是词组)
C- E::first-lint 文本第一行
D- E::selection 可改变选中文本的样式。
1、伪元素::before/::after 完全等价于一个dom元素。
2、它不会在dom树中生成。但是效果是有的。
每个dom元素中,都有一对隐形的子元素。可以把它当dom元素使用。
====================================================================
E::before E::after伪类选择器的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素选择器</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
width: 400px;
padding: 200px;
}
div:nth-of-type(1){
width: 300px;
height: 200px;
background-color: red;
float: left;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background-color: yellow;
float: right;
position: relative;
}
div:nth-of-type(2)::before{
/* 1.必须添加content属性,否则后期不可见 */
content:"";
/* 2.默认是行级元素,如果想设置宽高,就必须转换为块级元素属性 */
position:absolute;
width:20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
top: -10px;
}
div:nth-of-type(2)::after{
/* 1.必须添加content属性,否则后期不可见 */
content:"";
/* 2.默认是行级元素,如果想设置宽高,就必须转换为块级元素属性 */
position:absolute;
width:20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
bottom: -10px;
}
</style>
<body>
<div></div>
<div></div>
</body>
</html>
=========================================
其他伪元素的是使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他伪元素的是使用</title>
<style type="text/css">
/* 获取第一个字符:通过伪元素first-letter,实现首字下沉 */
p::first-letter {
color: #0000FF;
font-size: 30px;
float: left;
/* 文本环绕*/
}
/* 获取第一行内容:如果设置了first-letter,那么无法同时设置它的样式 */
p::first-line {
color: #FF00FF;
text-decoration: underline;
}
/* 设置当前选中内容的样式, 同样如果设置了first-letter,无法设置样式。
它只能改变显示的样式,而不能设置内容大小。 */
p::selection {
background-color: #8B0000;
}
</style>
</head>
<body>
<p>内蒙古生态状况如何,不仅关系全区各族群众生存和发展<br>而且关系华北、东北、西北乃至全国生态安全。把内蒙古建成我国北方重要生态安全屏障。必须以更大的决心、付出更为艰巨的努力。</p>
</body>
</html>