1. 写一个盒子, 要求用到margin,padding,border, 并用到它们的完整语法, 简写语法
2. 模仿课堂案例, 熟悉基本选择器的用法: 属性, 兄弟, 类型, 伪类等,自己举例完成,例如商品列表等来完成它, 重点放在nth-child, nth-of-type的理解上, 一定要多练多想为什么,并能分析执行的结果
3. 写出你对常用选择器的使用体会, 重点放在标签, class, id, 后代, 群组, 以及常用伪类上
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/*//标签选择器*/
ul{
margin-top: 0;
margin-bottom: 0;
padding-left:0;
}
/**层级选择器:*!*/
ul li{
width:40px;
height:40px;
background-color: wheat;
list-style:none;
border:1px solid black;
border-radius: 50%;
margin-left:5px;
box-shadow:5px 5px 2px #ccc;
/*设置文本水平居中*/
text-align:center;
line-height:40px;/*文本垂直居中*/
/*内联块:即是块又可以并排显示;块元素:块元素默认独占一行,行内元素:并排元素;*/
display: inline-block;
}
/*id选择器*/
#bg-blue{
background-color: lightblue;
}
/*类选择器*/
.bg-green{
background: lightgoldenrodyellow;
}
/*属性选择器*/
li[id]{
border:2px solid #fff580;
}
/*群组选择器*/
#bg-blue, .bg-green {
border: 2px solid blue;
}
/*常用的样式重置*/
/*body,h1,h2,h3,p,ul{*/
/*margin: 0;*/
/*padding: 0;*/
/**/
/*}*/
/*相邻选择器*/
#bg-blue +.bg-green{
/*选中下一个*/
/*background-color:red;*/
}
#bg-blue ~*{
/*选中下面所有的*/
/*background-color: red;*/
}
/*伪类:子元素选择器,*/
ul:first-child{
/*选中第一个子元素,还有last-child*/
/*background-color: coral;*/
}
/*选中第六个*/
ul:nth-child(6){
/*background-color: coral;*/
}
/*偶数或者括号里用even*/
ul:nth-child(2n){
/*background-color: coral;*/
}
/*奇数或者括号里用odd*/
ul:nth-child(2n-1){
/*background-color: coral;*/
}
/*倒数第三个*/
ul:nth-last-child(3){
/*background-color: coral;*/
}
/*伪类:类型选择器*/
/*ul下的li的第几个选择器 */
ul li:first-of-type{
/*background-color: coral;*/
}
ul li:last-of-type{
/*background-color: coral;*/
}
ul li:nth-of-type(5){
/*background-color: coral;*/
}
/*nth-child(n)关注位置
nth-of-style:除了关注位置外,还要元素的类型匹配
*/
</style>
<title>Document</title>
</head>
<body>
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li class="bg-green">3</li>
<li class="bg-green">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例