实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>0425作业</title>
<link rel="stylesheet" href="weilei.css">
<style>
ul {
margin: 0 auto;
padding-left: 0;
}
/*ul去除页面原始的padding和margin的数值*/
ul li {
display: inline-block;
width: 50px;
height: 50px;
/*background-color: bisque;*/
text-align: center;
line-height: 50px;
border-radius: 50%;
box-shadow: 2px 2px 1px black;
/*color: aliceblue;*/
}
/*通过对标签ul li 设置样式 ，初步做成圆形，开始测试选择器*/
#bg1 {
/*background-color: darkblue;*/
}
/*id 选择器可以起作用*/
.bg2 {
background-color: chocolate;
}
/*类选择器很好用*/
li[bg3] {
background-color: aqua;
}
/*这里有问题，等下看看视频*/
#bg1, .bg2 {
/*background-color: black;*/
}
/*群组选择器，直接一起设置id 和 class简单方便*/
#bg1 + * {
background-color: brown;
}
/*相邻选择器，用在特殊的使用场景，也是一种良好的解决方案。*/
#bg1 ~ * {
/*background-color: crimson;*/
}
/*兄弟选择器，一行代码解决同级结构样式，不错*/
/*开始伪类选择器*/
/*1.子元素选择器*/
ul :first-child {
background-color:yellow;
}
ul :last-child {
background-color:yellow;
}
ul :nth-child(6) {
background-color: darkmagenta;
}
/*子元素选择器最重要的一点就是 标签后面一定要跟空格 或者效果出不来。切记*/
/*2.伪类类型选择器*/
ul li:nth-of-type(8) {
background-color: crimson;
}
/*两个选择器的区别在于位置和类型，精髓在于理解*/
div p:nth-of-type(2) {
background-color: chocolate;
/*伪类类型选择器标签直接跟冒号*/
}
div :nth-child(2) {
background-color: blanchedalmond;
}
/*伪类子元素选择器标签后面空格跟冒号*/
form :checked + * {
color: crimson;
}
/*利用相邻设置让选中的变色，给用户提示，提升用户体验*/
button:hover {
height: 30px;
width: 60px;
background-color: crimson;
border: none;
color: aliceblue;
}
</style>
</head>
<body>
<p>
4月25日作业
理解选择器 注意混肴的: nth-child(), nth-of-type()
</p>
<hr>
<ul>
<li id="bg1">1</li>
<li class="bg2">2</li>
<li id="bg3">3</li>
<li>4</li>
<li class="bg2">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<hr>
<div>
<p>中学语文</p>
<li>历史老师</li>
<p>语文老师</p>
</div>
<div>
<p>历史</p>
<li>中国</li>
</div>
<hr>
<form action="">
<h3>用户登陆</h3>
<p>
<label for="email" id="email">邮箱：</label>
<input type="email">
</p>
<p>
<label for="password" id="password">密码：</label>
<input type="password">
</p>
<p>
<input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
<input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
</p>
<p>
<button value="登录">登录</button>
</p>
</form>
<p>
<!--本章内容比较多，需要记住的很多东西，还需要再后面的实战中不断的联系来学习。-->
<!--这个浏览器外部引入css代码有延迟。-->
</p>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
