学习web前端历程（十一）
结构性伪类选择器（继上一节）、伪对象选择器、css选择器的优先级、认识盒子
一、结构性伪类选择器（继上一节）
5.E：not（s选择器）
匹配不含有s选择器的元素E
注意：除了类名为dl的元素，not（）的值不加引号
div:not(.d1){
color: red;
}
6.E：first-child
父元素的第一个子元素
注意：E元素须是某个元素的子元素，基本上所有的元素都为body的子元素
li:first-child{
color: red;
}
7.E：last-child
父元素的最后一个子元素E
ul:last-child{
color: red;
}
8.E：only-child
E元素是唯一的子元素时被匹配（用得少）
p:only-child{
color: red;
}
9.E：empty（空元素时，用得少）
10.E:checked
匹配用户界面上处于选中状态的元素E（常用于radio、checkbox）
input:checked+span{
color: red;
}
11.E:nth-child
选中第几个元素（奇数odd、偶数even、n为所有）
.box p:nth-child(5){
color: red;
}
.box p:nth-child(odd){/*奇数*/
color: red;
}
.box p:nth-child(even){/*偶数*/
color: red;
}
.box p:nth-child(n){/*所有数*/
color: red;
}
div p:nth-child(n)
{
color: red;
}
结构性伪类选择器完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构伪类选择器</title>
<style>
/* div:not(.d1){
color: red;
}*/
/*li:first-child{
color: red;
}*/
/* ul:first-child{
color: red;
}*/
/*li:last-child{
color: red;
}*/
/* ul:last-child{
color: red;
}*/
/* p:only-child{
color: red;
}*/
/* input:checked+span{
color: red;
}*/
.box p:nth-child(5){
color: red;
}
.box p:nth-child(odd){/*奇数*/
color: red;
}
.box p:nth-child(even){/*偶数*/
color: red;
}
.box p:nth-child(n){/*所有数*/
color: red;
}
div p:nth-child(n)
{
color: red;
}
</style>
</head>
<body>
<!--<div class="d1">块元素</div>-->
<!--<div class="d1">块元素</div>-->
<!--<div class="d1">块元素</div>-->
<!--<div class="d2 d1">块元素</div>-->
<!--<div class="d2" id="div2">块元素</div>-->
<!--<ul>-->
<!-- <h3>标题</h3>-->
<!-- <li>元素</li>-->
<!-- <li>元素</li>-->
<!-- <li>元素</li>-->
<!-- <li>元素</li>-->
<!--</ul>-->
<!--<ul>-->
<!-- <li>元素</li>-->
<!-- <li>元素</li>-->
<!-- <li>元素</li>-->
<!-- <li>元素</li>-->
<!-- <h3>底部第一个</h3>-->
<!--</ul>-->
<!--<p>段落标签</p>-->
<!--<p>段落标签</p>-->
<!--<input type="radio" name="sex"/><span>男生</span>-->
<!--<input type="radio" name="sex" checked="checked"/><span>女生</span>-->
<!--<div class="box">-->
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
</div>
</body>
</html>
二、伪对象选择器（用得多）
伪对象也称伪元素（有两个冒号）
伪类检测某个元素的状态和属性
伪元素则表示DOM外部的某种文档结构
注意：其都不在HTML中，不是HTML的内容
常用的伪元素：
1.before
在被选元素的内容前插入内容、和content属性一起使用
p::before{
content: "学习";
color: red;
}
<p></p>
2.after
在被选元素的内容后插入内容、和content属性一起使用
p::after{
content: "努力";
color: red;
}
<p></p>
伪对象选择器完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素</title>
<style>
p::before{
content: "学习";
color: red;
}
p::after{
content: "努力";
color: red;
}
</style>
</head>
<body>
<p>前端</p>
</body>
</html>
三、css选择器的优先级
数值大优先级大
| 属性 | 数值 |
|---|---|
| style(style样式) | 1000 |
| id（ID选择器） | 100 |
| class（class选择器） | 10 |
| element（元素选择器） | 1 |
style样式>ID选择器>class选择器>元素选择器
注意：优先级相同，写在后面的样式起作用
四、认识盒子
盒模型主要定义了四个区域：
内容（content）、内边距（padding）、边框（border）、外边距（margin）
1.边框（border）
设置一个元素的边框，有三要素：宽、样式、颜色
这是要一次设置 （ border: 2px solid red;）
| 属性 | 属性值 |
|---|---|
| 宽度 | 1px |
| 样式 | solid |
| 颜色 | red |
也可以单独设置
| 属性 | 属性值 |
|---|---|
| border-width | 默认为3px |
| border-style | dotted 点线 、solid 实线、double 双线、dashed 虚线、none 无边框（默认） （必须存在） |
| border-color | 默认为黑色 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>认识盒子</title>
<style>
div{
/*border: 2px solid red;*/
border-width: 5px;
border-style: solid;/*dotted 点线 、solid 实线、double 双线、dashed 虚线、none 无边框（默认）*/
border-color: red;
background-color: pink;
height: 50px;
}
</style>
</head>
<body>
<div>前端</div>
</body>
</html>
2.外边距（margin）
相对于浏览器
围绕在元素边框周围的空白区域
（1）会在区域外创建额外的空白区域
（2）外边距是透明的
（一般只设置上和左）
语法：
margin：value;
单边设置：
（1）margin-top / left /right / bottom:value;
（2）value可取值 像素、%、auto（水平居中）、负值
外边距简写
margin：value;(四个方向)
margin：value （上下） value（左右）
margin：value （上） value（左右） value（下）
margin：value （上）value （右）value（下）value（左） 顺时针来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距</title>
<style>
div{
width: 200px;
height: 200px;
background-color: purple;
/* margin-top: 20px;*/
/*margin-left: 30px;/*上下左右全都赋值
8000
*/
/*margin: 20px 30px; /*上下20px 左右30px*/
/*margin: 20px 30px 10px;/*上20px 左右30px 下10px*/
/* margin: 20px 30px 10px 40px;/*上20px 右30px 下10px 左40px 按照顺时针方向*/
margin: 0px auto ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3.内边距（padding）
内容区域和边框之间的空间
会扩大元素边框所占的区域
语法：
padding:value;
单边设置：
（1）padding-top / left /right / bottom:value;
（2）value可取值 像素、%，但是不能为负值
内边距简写：
padding：value;(四个方向)
padding：value （上下） value（左右）
padding：value （上） value（左右） value（下）
padding：value （上）value （右）value（下）value（左） 顺时针来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
/* padding-left: 20px;
padding-top: 30px;
padding: 20px;
padding: 10px 20px;
padding: 10px 20px 30px;*/
padding: 10px 20px 30px 40px;/*按照顺时针方向赋值*/
}
</style>
</head>
<body>
<div>内容和边框的距离就是内边距</div>
</body>
</html>
4.外边距合并（出现在块级元素）
（垂直关系）
（1）当两个垂直外边距相遇时，他们将形成一个外边距，成为外边距合并
（2）合并后的外边距高度等于两个发生合并的外边距的高度中较大的
还存在一种情况：
（父子关系）
当两个div块嵌套时
①在父元素那加上边框（限制子块的div）
②用overflow：hidden
③用padding 内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外边距合并</title>
<style>
/*div{
width: 200px;
height: 200px;
background-color: blanchedalmond;
}
div:first-child{
background-color: lavenderblush;
margin-bottom: 100px;
}
div:last-child{
background-color: pink;
margin-top:50px;
}*/
/* .parent{
width: 200px;
height: 200px;
background-color: lavenderblush;
border: 2px solid pink;
}
#son{
width: 100px;
height: 100px;
background-color: pink;
margin:50px auto;
}*/
span{
width: 200px;
height: 200px;
background-color: lavenderblush;
border: 2px solid pink;
margin: 20px;
}
</style>
</head>
<body>
<!--
外边距问题是出现在块级元素的
-->
<!--<div></div>-->
<!--<div></div>-->
<!--<div class="parent">-->
<!-- <div id="son"></div>-->
<!--</div>-->
<span>leikuan</span>
</body>
</html>
显示图：
用margin设置外边距的宽度，有以下几个特点：
（1）块级元素的垂直相邻合并
（2）行内元素不占上下边距，不合并（只享受左右外边距）
（3）浮动元素的外边距也不合并
（4）允许指定负值的外间距，但是要小心
登录框的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录框</title>
<style>
div{
width: 300px;
height: 400px;
border: lavenderblush;
background-color: lavender;
margin: 0px auto;
padding-top:20px;
padding-left: 20px;
}
p{
color: grey;
}
.zhang{
width: 220px;
height: 20px;
}
.submit{
width: 270px;
height: 40px;
background-color: red;
}
.zhuce{
width: 270px;
height: 40px;
background-color: grey;
}
</style>
</head>
<body>
<div>
<p>登录百度账号</p>
<label> 账号：<input type="text" class="zhang"/><br/></label>
<label> 密码：<input type="password" class="zhang"/><br/><br/></label>
<input type="checkbox"/><small>下次自动登录</small>
<a href=" "><small>忘记密码？</small></a><br/><br/>
<input type="submit" value="登录" class="submit"/><br/><br/>
<small>可以使用以下方式登录</small>
<a href=""><img src="images/QQ.jpg" width="25" height="25"></a>
<a href=" "><img src="images/weibo.jpg"width="25" height="25"></a>
<a href=" "><img src="images/weixin.jpg" width="25" height="25"></a><br/><br/>
<input type="button" value="立即注册百度账号" class="zhuce"/>
</div>
</body>
</html>
显示图：
- 学习web前端历程（十三）
- 学习web前端历程（十二）
- web前端的学习历程
- 学习web前端历程（十六）
- 学习web前端历程（十四）
- 从零开始，学习web前端之css基础
- web前端学习笔记(CSS盒子的浮动)
- Spring 4 官方文档学习（十一）Web MVC 框架之约定优于配置
- WEB前端 vue学习 vue-router讲解router.push
- Web前端开发技能学习
- web前端基础学习篇(二)
- Web前端的学习之路
- web前端开发学习笔记
- 【web前端学习】-- JS页面跳转
- 关于学习Web前端半个月的总结
- web前端和java我要学习什么？
- 我的前端学习历程
- Spring 4 官方文档学习（十一）Web MVC 框架之resolving views 解析视图
- Web前端学习——JS基础一之DIV格式变换
- web前端学习摘要