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>CSS知识梳理05
原文地址：https://www.cnblogs.com/zhony/p/10072520.html