演示CSS中的常用选择器
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style>
/*标签选择器*/
ul {
border: 10px double darkkhaki;
margin: 0 auto;
padding: 15px 0;
}
/*层级选择器（后代选择器）：选择ul的后代元素（也叫子元素）*/
ul li {
list-style: none;
width: 60px;
height: 60px;
background-color: darkcyan;
/*设置文本水平垂直居中，其中垂直居中因为是单行文本，按照当前元素高度一致就可以*/
text-align: center;
line-height: 60px;
/*设置内联块，使多个块元素可以显示在一行中*/
display: inline-block;
/*设置圆角度，50%或者宽度的一半都行，建议设置50%，这样宽度改变后就无需再重新设置圆角度*/
border-radius: 50%;
/*增加左外边距*/
margin-left: 10px;
/*添加阴影，增加小球的美化效果*/
box-shadow: 8px 8px 5px #888888;
}
/*id选择器（规范一个id在页面中只使用一次*/
#bg_red {
background-color: lightcoral;
}
/*类选择器，可以进行复用*/
.bg_green {
background-color: lawngreen;
}
/*属性选择器（li后面不能加空格，否则就变成后代选择器*/
li[id = bg_red]{
border: 2px solid palegreen;
}
/*群组选择器*/
#bg_red, .bg_green {
border: 2px solid blue;
}
/*相邻选择器，第二个小球相邻的是第三个小球，可以用li，也可以用*号，用li语义化更强一些*/
#bg_red + li {
/*background-color: yellow;*/
}
/*兄弟同级选择器，第二个小球后面的所有同级兄弟元素都被选中*/
#bg_red ~ * {
/*background-color: yellow;*/
}
/*伪类，子元素选择器*/
ul :first-child {
background-color: red;
/*first-child，代表第一个小球，背景变为红色*/
}
ul :last-child {
background-color: red;
/*last-child，代表最后一个小球，背景变为红色*/
/* 因优先级问题,需要把前面的兄弟选择器注释掉*/
}
/*直接指定子元素,从1开始计数*/
ul :nth-child(6) {
background-color: red;
/*选择到第六个小球，指定背景色为红色*/
}
/*:nth-last-child(n): 倒数第n个*/
ul :nth-last-child(3) {
background-color: red;
/*倒数第3个小球为第8个小球，所以结果是选择到第8个小球，指定背景色为红色*/
}
/*伪类类型选择器*/
ul li:first-of-type {
background-color: darkorchid;
color: white;
/* 第一个li类型的元素背景为紫色，字体颜色为白色 */
}
ul li:last-of-type {
background-color: darkorchid;
color: white;
/* 最后一个li类型的元素背景改为紫色，字体为白色 */
}
ul li:nth-of-type(7) {
background-color: darkorchid;
color: white;
/* 选择第7个li类型的元素背景紫色，字体白色 */
}
/*:nth-child():关注点在子元素的“位置”*/
/*:nth-of-type():关注点在子元素的“类型”*/
/* 选中每个div中的第二个子元素背景设置为浅绿色, 结果为222、555 */
div :nth-child(2) {
background-color: lightgreen;
}
/*先选中第一个的div块, 再去选择对应的第3个子元素*/
div:first-of-type :nth-child(3){
/*background-color: lightblue;*/
}
div p:nth-of-type(2) {
background-color: yellow;
}
/* 这是个标签选择器，因优先级问题,需要把前面的类选择器注释掉，因为标签选择器优先级小于类选择器*/
/*分析：第一个div有2个p标签，而第二个div中只有1个p标签，所以第二个div就会pass掉，如果在第二个div中再添加一个p标签，结果会是第二个div中的第二个p标签会被选中*/
/*总结：div:first-of-type :nth-child(3) ======= p:nth-of-type(2) 所以正常要首选伪类选择器*/
/*伪类：表单控件*/
form :enabled {
background-color: wheat;
/*当表单元素可用时,将背景设置成小麦色*/
/*禁用表单元素为disabled，禁用后背景不会变化*/
}
/*将单选按钮中的文本前景色设置为红色，使用了伪类和相邻选择器*/
/*选择的过程是：先获取到当前被选中的按钮，再获取他的相邻子元素，也就是label标签，再将label的文本设置为红色*/
form :checked + label {
color: red;
}
/* 上面可以不用label, 用"*"号代替label也可以*/
/*当在控件中输入无效值时文本自动变为红色*/
/*例如在邮箱文本框中，如果输入邮箱格式错误，文本颜色自动变为红色，可以随时进行提示*/
form :invalid {
color: red;
}
/*设置控件获取到焦点时的样式，控件获取到焦点时，背景变为浅绿色*/
form :focus {
background-color: lightgreen;
}
/*设置鼠标悬停时的样式*/
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
border: none;
}
</style>
</head>
<body>
<ul>
<li class="bg_green">1</li>
<li id="bg_red">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>
<br>
<hr>
<br>
<!--演示伪类选择器中的子元素与类型选择器-->
<div>
<p>111</p>
<li>222</li>
<p>333</p>
</div>
<br>
<div>
<p>444</p>
<li>555</li>
</div>
<br>
<hr>
<br>
<!--演示表单选择器-->
<h2>用户登陆</h2>
<form action="">
<p>
<label for="email">邮箱：</label>
<input type="email" name="" id="email">
</p>
<p>
<label for="password">密码：</label>
<input type="password" name="" id="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>运行实例 »
点击 "运行实例" 按钮查看在线实例