CSS常用选择器,
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS常用选择器</title>
<style>
/* 标签选择器 */
ul {
border: 1px dashed rebeccapurple;
margin: 0 atuo;
}
/* 层级选择器: 选择 ul 的后代元素li*/
ul li{
/* 清除li的小圆点 */
list-style: none;
/* 设置一下高宽 */
width: 40px;
height: 40px;
background-color: beige;
/* 文字水平居中 */
text-align: center;
line-height: 40px;
/* 设置圆角度50%就是圆了 */
border-radius: 50%;
/*设置内联块,使多个块元素可以显示在同一行*/
display: inline-block;
/*增加左外边距,小球不至于太拥挤*/
margin-left:10px;
}
/* id选择器,#xxx */
#blue1{
background-color: blue;
color: #888;
}
/* 类选择器 */
.green{
background-color: greenyellow;
color: blue;
}
/* 属性选择器,选择li里面id是blue的 */
li[id="blue"]{
border: 2px solid blue;
}
/* 群组选择器,选择#blue和green;用,分割 */
#blue, .green{
border: 2px solid blue;
}
/* 相邻选择器 */
/* 第2个小球相邻的是第3个小球,可以用li,也可以用* */
#blue + *{
border: 2px solid blue;
}
/* 伪类选择器:子元素选择器 */
ul :first-child{
/* 选择ul里的第一个子元素 */
background-color: azure;
}
ul :last-child{
/* 选择ul里的最后个子元素 */
background-color:#855;
}
/* ul :nth-last-child(倒数第几个) */
ul :nth-last-child(2){
background: #892;
}
/* 伪类:类型选择器 */
ul li:first-of-type{
/* 第一个li类型的元素背景为紫色 */
background: #789;
}
ul li:last-of-type{
/* 最后一个li类型的元素 */
background: #564;
}
ul li:nth-of-type(5){
/* 选择第5个li类型的元素 */
background: #862;
color: white;
}
/* 我们发现, 伪类中的子元素选择器与类型选择器的功能几乎是一样的,那我们应该用哪个呢? */
/* 这二种伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/*:nth-child(m): 关注位置*/
/*:nth-of-type(n): 除了关注关注位置外, 还需要元素的类型匹配*/
/*li:nth-child(m): 如果这样写, 那么与 li:nth-of-type(n)功能几乎一样*/
/* 注意: 类型伪类选择器应该是我们的首选,尽可能优先使用它 */
/* 伪类: 表单控件 */
form :enabled{
/*当表单元素可用时,将背景设置成小麦色*/
background-color: wheat;
}
/* 将单选按钮中的文本前景色设置为红色,使用了伪类和相邻选择器 */
/*选择的过程是: 先获取到当前被选中的按钮, 再获取它的相邻子元素, 其实就是label标签,再将label的文本设置为红色*/
form :checked + label{
/* 这里不用label , 用 '*' 号也可以 */
color: #666;
}
/* 当在控件中输入无效值文本自动变成红色 */
/*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
form :invalid{
color: red;
}
/* 设置鼠标悬停时的样式 */
button:hover{
width: 56px;
height: 28px;
background-color: #888;
color: #852;
}
</style>
</head>
<body>
<div class="div"></div>
<!-- 基本选择器 -->
<ul>
<li >1</li>
<li id="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 id="blue1">ID选择器</div>
<div class="green">类选择器</div>
<!-- 演示表单选择器 -->
<form action="">
<label for="email">邮箱:</label>
<input type="email">
<label for="password">密码:</label>
<input type="password">
<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>
<button>登录</button>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
上面的代码是看直播和教学源码进行多次反复修改后的版本,
这里面主要内容是nth-child()和nht-of-type(),我推荐大家多次测试熟练下