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

css 伪类与伪元素

2017-07-16 19:53 253 查看

html文件

<!DOCTYPE html>

<html>

   <head>

       <meta charset="utf-8" />

       <title>css实验</title>

       <link rel="Shortcut Icon" href="img/qing.jpg" type="image/x-icon">

       <style type="text/css">

           @import url("css/stu_prop.css");

       </style>

   </head>

   <body>

       <div>

            <span lang="zh">frist child – span dom</span>

            <p lang="en">secend child – p dom

            <br>secend child – p dom</p>

            <center><img src="img/default.jpeg" srcset="img/qing.jpg 400w, img/700.jpeg 800w, img/liu.jpg 1600w, img/2400.jpg 2400w, img/3200.jpeg 3200w" sizes="100vw" /></center>

            <p>third child – p dom</p>

            <span>fourth child – span dom</span>

            <p>fifth child – span dom</p>

            <span lang="en">frist child – span dom</span>

            <p class="zh">secend child – p dom</p>

            <p>third child – p dom</p>

            <span>fourth child – span dom</span>

            <p>fifth child – span dom</p>

           <div class="empty"></div>

       </div>

   </body>

</html>
css文件

body{

   padding: 0 0;

   margin: 0 0;

   /*background: rgba(256,256,256,0.5);*/

}

body div{

   background: url(../img/qing.jpg) rgba(256,0,0,0.2) no-repeat;

   background-position: 0 0;

}

/*div img:nth-of-type(1n){

   display: inherit;

   background: rgba(0,0,0,0.2);

   opacity:0.0;

   filter:alpha(opacity=0);

   width: calc(10% + 10em);

   height: calc(10% + 10em);

}*/

body{

   counter-reset: small-apple 0;

}

div *::before{

   color: #F00;

   counter-increment: small-apple;

   content: counter(small-apple) ;

   margin-right: 20px;

}

/*div span:not(.zh){

   color: red;



}*/

div:empty{

   display: block;

   background: #CCC;

   min-height: 10px;

   width: calc(10% + 10em);

}

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

标签：

相关文章推荐

新的分享

章节导航