您的位置：首页 > Web前端 > HTML5

HTML5基础加强css样式篇（常用伪元素选择器after，before）（十五）

2017-03-16 09:44 441 查看

注：1伪元素与元素的区别：无法获取文本内容；

2.规范要求使用：：实际使用：（支持IE8）；

3.伪元素和本身元素在同一层级

1.after伪元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*.box::after {*/
.box:after {
content: "Hi ";

font-size: 36px;

display: block;
}
.box{
border: 1px solid red;
}

/*1.伪元素before与元素区别 : 无法获取文本内容*/
/*2.规范要求使用:: 实际使用: 支持IE8*/
</style>
</head>
<body>

<div class="box">
<span>Hello</span>
</div>

<script type="text/javascript">

</script>
</body>
</html>

2.before伪元素：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box::before {
content: "Hi ";

font-size: 36px;

display: block;
}

.box{
border: 1px solid red;
}
</style>
</head>
<body>

<div class="box">
<span>Hello</span>
</div>

<script type="text/javascript">

</script>
</body>
</html>

3.before和after的具体使用（解决高度塌陷）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
background-color: yellow;
}

.wrapper:after{
content: "";
/*注意：通过伪元素清除浮动，必须设置 display: block*/
display: block;
clear: both;
}

.box{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}

/*.clear-fix{*/
/*clear: both;*/
/*}*/

</style>
</head>
<body>

<div class="wrapper">
<div class="box"></div>
<!--<div class="clear-fix"></div>-->
</div>

<script type="text/javascript">

</script>
</body>
</html>

4.属性元素选择器和伪元素的综合使用：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">

ul{
list-style: none;
margin: 0;
padding: 0;
}

[href$=".doc"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_doc.png") no-repeat;

vertical-align: middle;

}

[href$=".xls"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_xls.png") no-repeat;

vertical-align: middle;

}

[href$=".pdf"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_pdf.png") no-repeat;

vertical-align: middle;

}

[href$=".mp3"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_mpg.png") no-repeat;

vertical-align: middle;

}
[href$=".html"]:before{
content: "";
display: inline-block;
width: 24px;
height: 24px;
background: url("img/icon_xml.png") no-repeat;

vertical-align: middle;

}

span{
vertical-align: middle;
margin-left: .5em;
}

ul li{
line-height: 2;
}

</style>
</head>
<body>

<ul>
<li><a href="file/test.doc"><span>世界真其美妙.doc</span></a></li>
<li><a href="file/test.xls"><span>销售报表.xls</span></a></li>
<li><a href="file/test.pdf"><span>JS权威指南.pdf</span></a></li>
<li><a href="file/test.mp3"><span>南山南.mp3</span></a></li>
<li><a href="file/test.html"><span>test.html</span></a></li>
</ul>

<script type="text/javascript">

</script>
</body>
</html>

效果如下：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5 css 经验

相关文章推荐

新的分享

章节导航