<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>css常用选择器</title>
<!-- <link rel="stylesheet" href="static/css/style01.css"> -->
<style>
/* 标签选择器 */
ul {
border:3px dotted red;
margin-top:0px;
margin-bottom: 0px;
/* padding-left: 0px; */
/* 包住隐藏的东西 */
overflow: hidden;
padding:10px;
}
/* 层级选择器 */
ul li {
/* 清除小黑点 */
list-style-type: none;
/* 宽给40 */
width:40px;
height:40px;
/* 背景给个小麦色 */
background-color:wheat;
/* 设置成圆的小球 */
border-radius: 50%;
/* 文本水平居中 */
text-align: center;
/* 文本垂直居中 */
line-height: 40px;
float:left;
margin-left:10px;
box-shadow: 2px 2px 2px #888;
}
/* id选择器 */
#bg-blue {
background-color:blue;
}
/* 类选择器 */
.bg-green {
background-color: green;
}
/* 属性选择器 */
li[id="bg-blue"] {
border:1px solid red;
}
/* 群组选择器 */
#bg-blue,.bg-green {
border:1px solid rgb(0, 255, 34);
}
/* 相邻选择器 */
#bg-blue + * {
background-color:lightslategray;
}
/* 兄弟选择器,id为bg-blue之后的所有兄弟全都有这个样式 */
#bg-blue ~ * {
background-color:-orange;;
}
/* 伪类 子选择器,中间要有空格 */
/* 第一个子选择器 */
ul :first-child {
background-color: crimson;
}
/* 最后一个子选择器 */
ul :last-child {
background-color: rgb(75, 131, 131);
}
/* 直接选中第几个,也可以是表达式，2n,便是偶数，2n+1是奇数 */
ul :nth-child(4) {
background-color:rgb(76, 160, 97);
}
/* 反着来，倒数第三个 */
ul :nth-last-child(3) {
background-color:lightcoral;
}
/* 伪类 类型选择器 */
ul li:last-of-type {
background-color:darkmagenta;
}
ul li:first-of-type {
background-color:darkmagenta;
}
/* div :nth-child(2) {
background-color:lightblue;
} */
div:first-of-type :nth-child(2) {
color:orange;
}
form :enabled {
background-color:darkcyan;
}
/* form :checked>div>input + *{
color:red;
} */
form :focus {
background-color: lightgreen;
}
button:hover{
width:56px;
height:28px;
background-color:black;
color:white;
}
form :invalid{
color:red;
}
</style>
</head>
<body>
<!-- 基本选择器 -->
<ul>
<li class="bg-green">1</li>
<li id="bg-blue">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div>
<p>张三</p>
<p>李四</p>
<p>王五</p>
<p>马六</p>
</div>
<div>
<p>二狗子</p>
<p>孙悟空</p>
</div>
<form method="GET" action="check.php">
<div>
<label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="请输入邮箱" required />
</div>
<div>
<label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码" required />
</div>
<div>
<label>保存时间:</label> <input type="radio" name="save" value="7" checked="checked"/>保存一周 <input type="radio" name="save" value="30" />保存一个月
</div>
<div>
<button type="button">登录</button>
</div>
</form>
</body>
</html>
