结构伪类选择器(续)
1、用nth-child()选择偶数
ul li:nth-child(even) {
background-color: #ccc;
}
/* 选择了所有偶数的孩子 */
ol li:nth-child(2n) {
background-color: blue;
}
2、选择奇数
/* 选择所有奇数的 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 选择奇数 */
ol li:nth-child(2n+1) {
background-color: red;
}
3、选择所有数
/* 3、nth-child(n),从0开始 每次加1 往后面计算 这里面必须是n 不能是其他字母 */
/* 第0个和超出部分的孩子会自动忽略 */
/* 指选择所有的孩子 */
ol li:nth-child(n) {
background-color: red;
}
4、n+m,和-n+m
n+3/n+m从m开始
-n加m指从1到m
/* n+3/n+m从m开始 */
ol li:nth-child(n+5) {
background-color: yellow;
}
/* -n加m指从1到m */
ol li:nth-child(-n+5) {
background-color: pink;
}
:nth-of-type用法
选第一个和最后一个元素
ul li:first-of-type{
background-color: pink;
}
ul li:last-of-type {
background-color: pink;
}
和nth-child()相似的用法
ul li:nth-of-type(even){
background-color: pink;
}
nth-child和nth-of-type的差别
(元素):nth-child(m)先把所有元素排好,在找前面的元素
(元素):nth-of-type先找前面元素,再排序号
ul li:nth-of-type(even){
background-color: pink;
}
/* 该语句结果并没有选中任何孩子, */
/* :nth-child()会把所有的盒子都排列序号 */
/* 执行的时候首先看:nth-child(1) 之后再回去看 前面的div */
/* 所以没有符合要求的孩子 */
section div:nth-child(1){
background-color: red;
}
/* nth-of-type(1)会把所有指定的盒子都排列序号 */
/* 执行的时候首先看div 之后再回去看 前面的nth-of-type(1) */
/* 所以选出来bbb */
/* 结构伪类选择器权重10 */
/* 以下语句权重12 */
section div:nth-of-type(1){
background-color: blue;
}
<section>
<p>aaa</p>
<div>bbb</div>
<div>ccc</div>
</section>
css3盒子模型
我们默认的盒子为
box-sizing: content-box;
盒子大小 = 本身大小+边框+padding
css3盒子模型
box-sizing: border-box;
盒子大小 = 本身大小
因此我们初始化页面可以为
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
伪类选择器
权重:伪类选择器权重和标签选择器一样为1
伪类选择器
(元素)::before//(元素)::after
before 为在父盒子里的内容前创建一个元素
after 为在父盒子里的内容后创建一个元素
应用:
向下的箭头可以用伪类选择器直接做,不用再HTML里加一个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1lv3na');
src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?1lv3na') format('truetype'),
url('fonts/icomoon.woff?1lv3na') format('woff'),
url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
div{
position: relative;
width: 200px;
height: 35px;
border: 1px solid red;
}
div::after{
position: absolute;
top: 10px;
right: 10px;
font-family: 'icomoon';
/* content: ""; */
content: '\e91e';
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
鼠标浮动到图片时就显示播放图
.tudou:hover::before
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tudou{
position: relative;
width: 440px;
height: 320px;
background-color: pink;
margin: 30px auto;
}
.tudou img{
width: 100%;
height: 100%;
}
.tudou::before{
content: '';
display: none;
/* 伪类选择器不能指定大小,因为加上了定位所以可以指定 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .3) url(arr.png) no-repeat center;
}
/* 中间不能有空格 */
.tudou:hover::before{
display: block;
}
</style>
</head>
<body>
<div class="tudou">
<img src="tudou.jpg" alt="">
</div>
</body>
</html>