CSS知识梳理05

 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>属性选择器</title> 5 <style> 6 /*选中p标签里面有align属性的*/ 7 /*p[align]{color:red;}*/ 8 /*选中p标签里面有align属性并且值为center的*/ 9 /*p[align=center]{color:red;}*/10 11 /*以ce开头的*/12 /*p[align^=ce]{color:red;}*/13 /*包含e的*/14  p[align*="e"]{color:red;}15 </style>16 </head>17 <body>18 <p>我叫怒放,我现在很慌,有个叫汪峰想要我的命!</p>19 <p align="right">我叫怒放,我现在很慌,有个叫汪峰想要我的命!</p>20 <p align="center">我叫怒放,我现在很慌,有个叫汪峰想要我的命!</p>21 <p align="cesuo">厕所</p>22 23 24 <input type="radio" name="sex" value="1" />25 </body>26 </html>

:link
:visited
:active
:hover

:focus 获取焦点的时候

 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>伪类选择器</title> 5 <style> 6 /*当获取焦点的时候*/ 7  input:focus{border:1px solid blue;} 8  9 /* :not(选择器) */10 /*input:not(.one){width:400px;}*/11 12 /*符合大儿子身份的li*/13  li:first-child{color:red;}14 /*符合小儿子身份的li*/15  li:last-child{color:blue;}16 /*符合独生子身份的li*/17  li:only-child{font-size:30px;}18 19 /*符合第n个儿子身份的li*/20  li:nth-child(2){font-size:50px;}21 22 /*同级元素中的第1个li*/23  li:first-of-type{background:lime;}24 25 /*绝后的标签*/26  p:empty{height:30px;background:pink;}27 /*:checked:单选框或多选框*/28 /*:checked{width:100px;height:50px;}*/29  :checked+span{color:red;}30 </style>31 </head>32 <body>33 <!-- 将选中的姓名改为红色 -->34 <!-- :checked -->35 <input name="sex" type="radio"><span></span>36 <input name="sex" type="radio"><span></span>37 <!-- 选:empty -->38 <p></p>39 40 41 <!-- :focus -->42 <input />43 <input class="one" />44 <input />45 46 <!-- 选儿子 -->47 <ul>48 <div>第1个儿子不是li</div>49 <li>张根基第一次去女朋友家</li>50 <li>老丈人热情的握住他的手说</li>51 <li>你就是根基吧?</li>52 </ul>53 <hr>54 <ol>55 <div>第1个儿子不是li</div>56 <li>知道上帝看片为什么不要钱吗?</li>57 <li>人在做</li>58 <li>天在看</li>59 </ol>60 <hr>61 <ul>62 <li>秦始皇的太子一般都不大行</li>63 </ul>64 </body>65 </html>
 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>伪对象</title> 5 <style> 6 /*选中第1个字*/ 7  p::first-letter{ 8  font-size:30px; 9  color:orange;10 }11 12 /*选中1行*/13  p::first-line{14  color:blue;15 }16 17 /*火狐需要加前缀*/18  p::-moz-selection{19  background:black;20  color:red;21 }22  p::selection{23  background:black;24  color:red;25 }26 27 /*在前面追加内容*/28  p::before{29  content:‘请问:‘;30 }31 /*在后面追加内容*/32  p::after{33  content:‘行黑红选择喝两杯水!‘;34 }35 </style>36 </head>37 <body>38 <p>凝聚力发时间浪费了多少分了呢<br>接飞机撒漏发了</p>39 </body>40 </html>
 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>opacity透明度和边框圆角</title> 5 <style> 6  .box{ 7  width:200px; 8  height:200px; 9  background:orange;10  position:relative;11  top:200px;12  left:50px;13 14 /*边框圆角*/15  border-radius:50%;16 }17  .box:hover{18 /*0~1之间:0全透明,1不透明*/19  opacity:0.5;20 /*透明度兼容IE的写法*/21  filter:alpha(opacity=50);22 }23 24  .box1{25  width:300px;26  height:300px;27  background:green;28 29 /*边框圆角*/30  border-bottom-left-radius:100%;31  border-bottom-right-radius:50%;32 }33 </style>34 </head>35 <body>36 <div class="box"></div>37 <div class="box1"></div>38 </body>39 </html>
 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>盒子阴影</title> 5 <style> 6  .box{ 7  width:200px; 8  height:400px; 9  background:green;10  margin:50px auto;11 12 /*盒子阴影:x轴 y轴 模糊度 外延值 颜色*/13 /*box-shadow:0px 0px 10px 10px red;*/14 /*小米官网的凸起阴影*/15  box-shadow:0 15px 30px rgba(0,0,0,0.5);16 }17 18  p{19  font-size:100px;20 /*文字阴影*/21  text-shadow:5px 5px 3px #544;22 /*文字描边*/23  -webkit-text-stroke:3px pink;24 }25 </style>26 </head>27 <body>28 <div class="box"></div>29 30 <p>谁娶了多愁善感的你,谁特么倒霉到底!</p>31 </body>32 </html>

animation:名称 持续时间 过渡类型 延迟时间 循环次数 是否反向;
@keyframes 定义动画详情

 1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS的动画</title> 5 <style> 6  @import ‘‘; 7  .box{ 8  width:100px; 9  height:100px;10  background:pink;11 12 /*动画*/13  animation:sb .5s linear infinite alternate;14 }15 16  @keyframes sb{17  50%{18  transform:translateY(400px);19 }20  100%{21  transform:translateX(800px);22  background:blue;23 }24  }25 </style>26 </head>27 <body>28 <div class="box"></div>29 </body>30 </html>

 

相关文章