当前栏目: [前端开发基础]您现在的位置是:成都seo > 前端学习 > 前端开发基础 > 正文

前端基础学习第二十天

2020-04-21 00:52前端开发基础 人已围观文章来源:未知文章作者:admin

简介结构伪类选择器: 结构伪类选择器主要根据文档结构来选择器元素,根据父级选择器里面的子元素 1.n可以是数字,...

结构伪类选择器:
 
结构伪类选择器主要根据文档结构来选择器元素,根据父级选择器里面的子元素
 
1.n可以是数字,关键字,和公式、
 
2. 基数(odd)  偶数(even)
 
3.n是遍历,全选
 
nth-child(n)  //全选
 
nth-child(2n) //偶数
 
nth-child(2n+1) //奇数
 
nth-child(n+3) //从第3个开始选
 
nth-child(-n+3) // 从3往前面选
 
------------------------------
 
结构伪元素选择器
 
1.用于父级里面的第几个孩子
 
2. ul li:nth-child对父元素所有孩子排序选择 ,先找到N个孩子,在看是否匹配 
 
3.ul li:nth-of-type 先找到匹配的孩子,在从第N个开始
 
4. ul li:nth-child N 是从0 开始计算的
 
注意权重问题:
 
section div:nth-of-type (1) 权重是12
-----------------------------------
 
伪元素选择器
 
::before 在元素内部的前面插入内容
::after 在元素内容的后面插入内容
 
注意: 创建一个元素,属于行内元素
 
1.新创建元素,文档中是找不到的,所以称为伪元素
 
2.before 和 after 必须有content属性
 
3.before 在父元素 内容前面创建元素 ,after 在父元素后面插入元素
 
4.伪元素和标签选择器一样,权重为1
 
-------------------------
----------伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例效果-------------

前端,基础,学习,第二,十天,结构,伪类,选择器, . 前端基础学习第二十天
前端,基础,学习,第二,十天,结构,伪类,选择器, . 前端基础学习第二十天
前端,基础,学习,第二,十天,结构,伪类,选择器, . 前端基础学习第二十天
前端,基础,学习,第二,十天,结构,伪类,选择器, . 前端基础学习第二十天
----------伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例源码-------------
 
 
<!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">
    <title>伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例</title>
    <style>
        .tudou {
            position: relative;
            width: 444px;
            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, .4) url(images/arr.png) no-repeat center;
        }
 
        /* 当我们鼠标经过了 土豆这个盒子,就让里面before遮罩层显示出来 */
        .tudou:hover::before {
            /* 而是显示元素 */
            display: block;
        }
    </style>
</head>
 
<body>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <img src="images/tudou.jpg" alt="">
    </div>
</body>
 
</html>
 
-------------------------------------------
双伪元素清除浮动的方法
 
1.清除浮动额外标签法
 
.clearfix:after {
伪元素必须写的属性
content:"";
插入元素必须是块级
display:block;
不要看见这个元素
height:0;
核心代码清除浮动
clear:both;
不要看见这个元素
visibility:hidden;
 
}
------------
升级优化
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
----------------------------------
css3 盒子模型
 
box-sizing: border-box; //不会撑大盒子
 
----------------------------------
css3 滤镜
 
图像变模糊
 
img {
//小括号数值越大,图像越模糊
filter: blur();
}
 
<img src="" >
 
------------------------------------
css3 calc 函数
 
width: calc(100%-30px);
 
括号里面可以是使用 + - * / 进行计算
 
 
--------------------------------------
CSS3 过渡
 
transition: 属性 时间 运动曲线 合适开始:
 
谁来过渡 谁来加
 
使用多个属性 采用逗号 
 
ALL也可以代表所有属性
transition: width .5s ease 1s,height .5s ease 1s;
 
--------------------------------
 
 
 
 
 
 

Tags:

说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

本栏推荐

标签云

站点信息

  • 文章统计101篇文章
  • 标签管理标签云
  • 微信公众号:扫描二维码,关注我们