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

来源：互联网发布：梦三梅西知乎编辑：程序博客网时间：2024/05/14 15:58

注：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>

效果如下：

0 0