一、概述
本节课主要讲了表单form(单选、多选、文本、按钮、图像)、元素单位(px、em、rem)、样式继承和冲突、css的各种选择器。尤其是选择器是重中之重,手打了一遍代码还是觉得理解有不到位的地方。
二、代码(选择器部分)
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>选择器</title> <style type="text/css"> ul{ margin: 0; width: 550px; border: 1px dashed #666; padding: 10px 5px; } /*字块撑开父级区*/ ul:after{ content:''; display: block; clear: both; } ul li{ list-style: none; float: left; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 50%; box-shadow: 2px 2px 2px #888; background-color: skyblue; margin-right: 5px; } /*id选择器*/ #item1 { background-color: coral; } /*类选择器*/ .item2{ background-color: gold; } /*属性选择器:属性名*/ ul li[class]{ background-color: purple; } ul li[class="item2"]{ background-color: grey; } /*发现问题!!!!选择器[]和元素名之间必须没有空格*/ /*属性选择器:以指定属性值开头,注意^、$的符号位置*/ ul li[class^="cat"]{ background-color: brown; } ul li[class$="pig"]{ background-color: red; } /*属性选择器:属性包括指定字符串*/ ul li[class*="te"] { background-color: green; } ul li[class*="t"] { background-color: black; } /*和上下文位置相关的选择器:后代(层级、派生选择器)是祖先关系父子、父父子都可以*/ /*后代选择器*/ body ul li{ border: 1px solid black; } /*子选择器:只有父子关系*/ ul >li[class$="pig"]{ background-color:greenyellow; } /* 相邻选择器:当前元素不被选中*/ ul li[class$="pig"] ~ * { background-color :black; color: white; } /*相邻兄弟选择器*/ ul li[class$="pig"] + li{ background-color: pink; color: black; } /*群组选择器*/ h1 , p{ font-size: 2rem;/*32px*/ font-weight: lighter; margin :0; } /*伪类选择器:a标签链接*/ a{ font-size: 2rem; text-decoration: none; } /*访问前*/ a:link{ color: red; } /* 后*/ a:visited{ color: orange; } /* 焦点*/ a:focus{ color: purple; } /*鼠标悬停*/ a:hover{ color:green; } /* 鼠标点击*/ a:active{ color: blue; } /* 伪类选择器,计数从1开始*/ ul li:first-child{ background-color: #efefef!important; } ul li:last-child{ background-color: red; } ul li:nth-child(5){ background-color: green; } ul li:nth-child(even){ background-color: purple!important;; } /* 上面这个优先级高 ul li[class$="pig"] + li{ background-color: pink; color: black; }*/ ul li:nth-child(odd){ background-color: gold!important; } /*伪类选择器根据子元素数量选*/ /*找只有唯一子元素的选择*/ ol :only-child{ background-color: lawngreen; } ol li:only-child{ background-color: lawngreen; } /*倒数第三个,同样是important这个由于后写所以覆盖*/ ul li:nth-last-child(3) { background-color: wheat!important; } /*选中多个元素中的子元素*/ ol li:nth-of-type(2){ background-color: wheat; } :empty{ width: 200px; height: 200px; background-color: coral; } :empty:after{ content: "你好"; } :empty:before{ content: url("../0814/bj.jpg"); } </style> </head> <body> <ul> <li id="item1">1</li> <li class="item2">2</li> <li class="cat dog pig">3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <h1>css选择器练习</h1> <p>练习很重要</p> <a href="http://www.php.cn">zphp大发哈哈哈</a> <ol> <li>列表1</li> </ol> <ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> </ol> <ol> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> </ol> <div></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
运行结果图:
三、总结
1、选择器[]和元素名之间必须没有空格
2、后代选择器父子、父父子都可以
3、ol\ul:空格only-child
4、a链接的处理有个规律要记住:
a:link - >a:visited - > a:hover - > a:active
简写就是 L V H A
这个顺序是一定要遵循的
四、附录
手写截图