CSS选择器是非常重要的知识点，熟练掌握能够有效提高开发效率
盒模型
实例
<!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">
<style type="text/css">
.box{
background: lightpink;
width: 160px;
height:160px;
margin: 60px 60px 60px 60px;
/* margin: 60px; */
padding: 60px 60px 60px 60px;
/* padding: 60px; */
}
#box{
width: 120px;
height: 120px;
background: lightblue;
border: 6px solid lightgreen;
}
</style>
<title>Document</title>
</head>
<body>
<div class="box">
<div id="box"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
margin外边距：margin-top上边距、margin-right右边距、margin-bottom下边距、margin-left左边距。
简写方式：
margin( 20px 20px 20px 20px );排列顺序：上 右 下 左
margin( 20px 20px 20px );排列顺序：上 左右 下
margin( 20px 20px );排列顺序：上下 左右
margin(20px);排列顺序：上下左右
padding内边距：padding-top上边距、padding-right右边距、padding-bottom下边距、padding-left左边距。
简写方式：
padding( 20px 20px 20px 20px );排列顺序：上 右 下 左
padding( 20px 20px 20px );排列顺序：上 左右 下
padding( 20px 20px );排列顺序：上下 左右
padding( 20px );排列顺序：上下左右
border边框：border-top上边框、border-right右边框、border-bottom下边框、border-left左边框。
border( 1px solid #ccc ); 默认是上下左右四个边框
CSS选择器
实例
<!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">
<link rel="stylesheet" href="./css/0703_css.css">
<style type="text/css">
/* 标签选择器 */
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
/* 层级选择器 */
ul li {
width: 100px;
height: 100px;
background-color: lightgreen;
text-align: center;
line-height: 100px;
/* float: left; */
display: inline-block;
}
/* class选择器 */
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
text-align: center;
line-height: 100px;
}
/* ID选择器 */
#box2 {
width: 100px;
height: 100px;
background-color: lightsalmon;
text-align: center;
line-height: 100px;
}
/* 属性选择器 */
li[class="box3"] {
width: 100px;
height: 100px;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
}
/* 群组选择器 */
.box4,.box5 {
width: 100px;
height: 100px;
background-color: lightpink;
text-align: center;
line-height: 100px;
}
/* 相邻选择器 */
/* box4相邻的是box5,可以用li,也可以用* */
.box4 + * {
width: 100px;
height: 100px;
background-color: lightskyblue;
border: 2px solid black;
text-align: center;
line-height: 100px;
}
/* 伪类子元素选择器 */
/* 选择第一个子元素 */
ul :first-child {
width: 100px;
height: 100px;
background-color: rebeccapurple;
text-align: center;
line-height: 100px;
}
/* 选择最后一个子元素 */
ul :last-child {
width: 100px;
height: 100px;
background-color: rebeccapurple;
text-align: center;
line-height: 100px;
/* 设置阴影 */
box-shadow: 2px 2px 1px #888;
}
/* 指定某个子元素，从1开始算 */
/* 选择第五个子元素 */
ul :nth-child(5) {
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
}
/* 倒数第二个子元素 */
ul :nth-last-child(2) {
width: 100px;
height: 100px;
background-color: rebeccapurple;
text-align: center;
line-height: 100px;
}
/* 伪类：类型选择器 */
/* 选中第一个li类型 */
ul li:first-of-type {
width: 100px;
height: 100px;
background-color: royalblue;
text-align: center;
line-height: 100px;
}
/* 选中最后一个li类型 */
ul li:last-of-type {
width: 100px;
height: 100px;
background-color: royalblue;
text-align: center;
line-height: 100px;
}
/* 选中第三个li类型，从1开始 */
ul li:nth-of-type(3) {
width: 100px;
height: 100px;
color: aliceblue;
text-align: center;
line-height: 100px;
border-radius: 100px;
}
/* 伪类中的子元素选择器与类型选择器的功能几乎是一样的*/
/* 这二种伪类选择器关注点不同, 子元素选择器的重点是 "child" 关键字上,关注的是子元素位置 */
/* 而类型选择器关注点在 "type" 关键字上,重点是元素的类型 */
/* 选择div中的第二个元素 */
div :nth-child(2) {
background-color: aquamarine;
}
/* 选择西门大官人 */
div:first-of-type :nth-child(3) {
background-color: blueviolet;
}
/* 选择div中一个p标签 */
div p:nth-of-type(1) {
background-color: brown;
}
/* 如果我要选择只有一个子元素且子元素为p,应该如何做?
此时, 第一个div有二个p元素,必须落选,所以只有第二个div中的p被选中*/
p:only-of-type {
background-color: pink;
}
/* 伪类：表单控件 */
/* 设置form下所有标签的背景色 */
form :enabled {
background-color: rosybrown;
}
/* 当在控件中输入无效值文本自动变成红色 */
/*例如邮箱文本框,如果输入的不是一个有效的邮箱格式字符串, 就会实时的用颜色提示用户的*/
form :invalid {
color: red;
}
/* 设置控件获取到焦点时的样式 */
/*控件获取到焦点时, 背景变成绿色*/
form :focus {
background-color: lightgreen;
}
/* 设置鼠标悬停时的样式 */
button:hover {
width: 56px;
height: 28px;
background-color: black;
color: white;
}
</style>
<title>CSS选择器</title>
</head>
<body>
<ul>
<li>你</li>
<li class="box">好</li>
<li id="box2">PHP</li>
<li class="box3">中</li>
<li class="box4">文</li>
<li class="box5">网</li>
</ul>
<div>
<p>猪哥</p>
<li>朱老师</li>
<p>西门大官人</p>
</div>
<div>
<p>欧阳克</p>
<li>金莲妹妹</li>
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
