演示css的常用选择器
为了方便运行实例查看结果，把原本外联的css复制在<head>的<style>里。
实例
<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<!-- <link rel="stylesheet" href="static/css/style1.css">-->
<title>演示常用选择器</title>
<style>
/*标签选择器*/
ul {
border: 2px solid lightpink;
/*margin-top:0;*/
/*margin-bottom:0;*/
/*简写*/
margin: 0 auto;
padding-left: 0;
}
/*层级选择器*/
ul li {
list-style: none;
width: 60px;
height: 60px;
background-color: yellow;
display:inline-block;
border-radius: 50%;
text-align: center;
line-height: 60px;
box-shadow: 3px 3px 1px #888;
}
/*id选择器*/
/*#bg-red {*/
/* background-color:red;*/
/*}*/
/*class选择器*/
/*.bg-blue {*/
/* background-color:blue*/
/*}*/
/*属性选择器*/
/*li[id="bg-red"]{*/
/* border: 4px solid yellow;*/
/*}*/
/*群组选择器*/
/*#bg-red, .bg-blue {*/
/* border:4px solid pink;*/
/*}*/
/*相邻选择器*/
/*#bg-red + li {*/
/* background-color:green;*/
/*}*/
/*兄弟选择器*/
/*#bg-red ~ * {*/
/* background-color:lightsalmon;*/
/*}*/
/*伪类：子元素选择器*/
ul :first-child {
background-color:darkorchid;
}
ul :last-child {
background-color:darkorchid;
}
ul :nth-child(5) {
background-color:darkorchid;
}
/*倒选*/
ul :nth-last-child(3) {
background-color:darkorchid;
}
/*伪类：类型选择器*/
ul li:first-of-type {
background-color: chartreuse;
color:white;
}
ul li:last-of-type {
background-color: chartreuse;
color:white;
}
ul li:nth-of-type(4) {
background-color: chartreuse;
color:white;
}
ul li:nth-last-of-type(4) {
background-color: chartreuse;
color:white;
}
/*nth-child() 关注点在于子元素的“位置”*/
/*nth-of-type() 关注点在于子元素的“类型”*/
div :nth-child(2) {
background-color:green;
}
/*因为div是类选择器，所有下面用标签p定义显示背景颜色时，需要注释div类选择器才能在网页中看到效果,类选择器 > 标签选择器*/
/*div:first-of-type :nth-child(3) {*/
/* background-color:lightblue;*/
/*}*/
div p:nth-of-type(2) {
background-color:yellow;
}
form :enabled {
background-color:wheat;
}
form :checked + label {
color:red;
}
form :invalid {
color:red;
}
form :focus {
background-color:lightgreen;
}
button:hover {
width: 60px;
height: 30px;
background-color:lightblue;
color:white;
border: none;
}
</style>
</head>
<body>
<ul>
<li class="bg-blue">1</li>
<li id="bg-red">2</li>
<li class="bg-blue">3</li>
<li class="bg-blue">4</li>
<li>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>
<p>xxx</p>
</div>
<hr>
<!--演示表格选择器-->
<h1>用户登录</h1>
<form action="">
<p>
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
<br>
<label for="password">密码</label>
<input type="password" id="password" name="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>登录</button>
</p>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
最终整个网页的显示效果，鼠标悬停在登录按钮上：
没有伪类选择器的页面显示效果：
体验div的位置和类型的区别：
演示伪类选择器的页面，p标签被选中定义的效果：
