css3(属性选择器，结构伪类选择器，伪元素选择器 ,css3盒子模型，滤镜filter, cale, 过渡transition))

最新推荐文章于 2022-08-16 22:48:02 发布
最新推荐文章于 2022-08-16 22:48:02 发布
阅读量252 收藏
点赞数
分类专栏： 前端基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45282543/article/details/109825522
版权

css3

1.属性选择器

在这里插入图片描述

2.结构伪类选择器

在这里插入图片描述

 /* 找li标签里面 最后一个li标签 */
        li:last-child {
            background-color: #ffff55;
        }

        /* 找li标签里面 第一个li标签 */
        li:first-child {
            background-color: chartreuse;
        }

在这里插入图片描述
nth-child: 只按顺序找，类型必须匹配

nth-of-type: 按顺序找，如果类型不匹配，则继续下一个

 /* 因其第一个元素不是 li,  */
        li:nth-child(1) {
            background-color: red;
        }

        /* 可以使第一个 li有效果 */
        li:nth-of-type(1) {
            background-color: royalblue;
        }

<body>
    <ul>
        <p></p>
        <li>1</li>
    </ul>
</body>

在这里插入图片描述

/* li:nth-child( 英文 ，数字 ，表达式){}*/

        /* even 偶数选择器 */
        li:nth-child(even) {
            background-color: chocolate;
        }

        /* odd奇数选择器 */
        li:nth-child(odd) {
            background-color: cornflowerblue;
        }

        /* 数字  */
        li:nth-child(2) {
            background-color: cornsilk;
        }

        /* n 代表所有的 li标签 */
        li:nth-child(n) {
            background-color: #ffffff;
        }

        /* 2n  2的倍数  2*0=0 2*1=2 2*2=4 2*3=6   奇数*/
        li:nth-child(2n) {
            background-color: #f3040f;
        }

        /* 2n+1 2的倍数+1 2*0+1=1 2*1+1=3 ....   偶数*/
        li:nth-child(2n+1) {
            background-color: #ffff55;
        }


        /*  选择器前五个  -n+5   -0+5=5  */
        li:nth-child(-n+5) {
            background-color: #fff;
        }

        /* 选择后五个 */
        li:nth-last-child(-n+5) {
            background-color: blue;
        }

        /* 从6往后的所有li */
        li:nth-child(n+6) {
            background-color: darkgrey;
        }

        /* 13-19 */
        li:nth-child(n+13):nth-child(-n+19) {
            background-color: darkgreen;
        }

在这里插入图片描述

3.伪元素选择器

可以帮助我们利用 css 创建新的标签元素 ，不用HTML标签，从而简化HTML
在这里插入图片描述
注：创建的元素 属于行内元素
​ 权重为 1
**content:"";**必须

使用场景：

1.伪元素字体图标

.arrow-icon::after{
    content: "\e91e";         /* content: ""; 必写 */
    font-family: 'icomoon';
    font-size:18px;
    margin-left: 6px;
}
  1. 仿土豆
   /* 当鼠标经过土豆盒子，让里面的遮罩层显示出来*/

   .tudou:hover::before{

   /* 显示元素*/

   display:block;

   }

3.伪元素清除浮动

.clearfix::after {
            /* 必写属性 */
            content: "";
            /* 插入元素必须是块元素 */
            display: block;
            /* 不要看见这个元素 */
            height: 0;
            /* 清除元素 */
            clear: both;
            /* 不要看见这个元素 */
            visibility: hidden;
        }
  .clearfix {
        /* IE6,7专有 */
        *zoom: 1;
    }

.clearfix::before,
        .clear::after {
            content: "";
            /* 转化为块级元素 并且一行显示 */
            display: table;
        }

        .clear::after {
            clear: both;
        }
  .clearfix {
        /* IE6,7专有 */
        *zoom: 1;
    }

​

css3盒子模型

box-sizing：conten-box; （以前默认）

box-sizing: border-box; (padding 和 border 不会撑大盒子)

滤镜 filter

 img {     
     /* filter: 函数（）  blur模糊处理  数值越大越模糊 */
      filter: blur(5px);
   }


修改所有图片的颜色为黑白 (100% 灰度):
​    img {
  -webkit-filter: grayscale(100%); /* Chrome, Safari,  Opera */
​        filter: grayscale(100%);
}

转化图像的透明程度:
​      img {
  -webkit-filter: opacity(30%); /* Chrome, Safari,  Opera */
​      filter: opacity(30%);
}

cale

在这里插入图片描述

过渡 transition

过渡动画：从一个状态 渐渐过渡到另一个状态。经常和 :hover 一起使用。
在这里插入图片描述

weixin_45282543
关注
专栏目录
CSS 中的 属性选择器
CyberPlayer的博客
02-23 1971
css属性选择器的作用是：为带有特定属性的 HTML 元素设置样式 CSS [attribute] 选择器 [attribute] 选择器用于选取带有指定属性的元素。 下例选择所有带有 target 属性的 <a> 元素； a[target] { background-color: yellow; } CSS [attribute="value"] 选择器 [attribute="value"] 选择器用于选取带有指定属性和值的元素。 下例选取所有带有 targe
android选择日期dialog的使用,Android日期选择器对话框DatePickerDialog使用详解
weixin_42372573的博客
05-31 738
调用Android原生日期选择器对话框就是DatePickerDialog，具体内容如下在Android4.4系统上效果如图：在Android5.0以上效果如图：1、Activity的onCreate方法中获取当时的年，月，日Calendar ca = Calendar.getInstance();mYear = ca.get(Calendar.YEAR);mMonth = ca.get(Cale...
CSS中的属性选择器
weixin_48637535的博客
08-09 3096
CSS3中共有7种属性选择器，具体说明如下： 1.E[attr]：只使用了属性名，并没有确定任何属性值。 2.E[attr="value"]：指定了属性名，并指定了该属性的属性值。 3.E[attr~="value"]：指定了属性名，并指定了该属性的属性值，此属性值是一个词列表，并且以空格隔开，其中的词列表包含一个value值，而且“~”不可忽略。 4.E[attr^="value"]：指定了属性名，并指定了该属性的属性值，属性值是以value开头的。 5.E[attr$="value"]：指定了
【CSS】属性选择器
weixin_43790653的博客
08-16 4015
【CSS】属性选择器
CSS-属性选择器
weixin_41342791的博客
08-28 178
- 属性选择器 * - 作用：可以根据元素中的属性或属性值来选取指定元素 * - 语法： * [属性名] 选取含有指定属性的元素 * [属性名="属性值"]选取含有指定属性值的元素 * [属性名^="属性值"]选取以属性值开头的元素 *...
Cale：个人博客
02-23
4. **自定义CSS伪类和伪元素**：利用`:hover`、`:active`、`:focus`等伪类以及`::before`和`::after`伪元素，可以为交互元素添加动态效果。 5. **过渡和动画**：CSS的`transition`和`animation`属性可以创建平滑的...
css设置h5页脚固定底部
cxy980626的博客
01-11 757
思路：将页面拆分为主体内容和页脚两大部分，给内容区域设置css样式：min-height: calc(100vh - 120px); <template> <div class="container"> <!-- 内容 --> <div class="page-body"> 这里放页面的内容 </div> <!-- 页脚 --> <div class="page-foot.
CSS | calc的基本使用
MGsniper的博客
01-21 609
 在box-sizing的解析与应用场景一文的问题场景中，我们用border-box属性使得元素的盒子宽高 为 父元素（内容）宽高 * 100%。  除了使用border-box，我们还可以使用CSS3加入的calc（）函数进行规范。  我们可以使用calc()对元素的宽高进行手动计算，calc(100% - padding * 2 - border * 2)，效果等价于border-box &amp;amp;amp;amp;l...
android 日期对话框,Android日期选择器对话框DatePickerDialog使用详解
weixin_33936345的博客
05-27 2262
调用Android原生日期选择器对话框就是DatePickerDialog，具体内容如下在Android4.4系统上效果如图：在Android5.0以上效果如图：1、Activity的onCreate方法中获取当时的年，月，日Calendar ca = Calendar.getInstance();mYear = ca.get(Calendar.YEAR);mMonth = ca.get(Cale...
css属性选择器
qq_39111074的博客
08-24 342
以前都是通过设置class或者id属性来进行标签选择，class属性有时需要设置复合名称，css属性可以使用属性选择器，更简单的进行标签选择 css属性选择器使用方法 1.标签名[属性名]- - -标签名相同，要选择的标签有某个属性，但是其他标签没有 2.标签名[属性名=属性值]- - - 标签名相同，都具有某个属性，但是属性值不同 3.标签名[属性名^=×××]- - -标签名相同，都具有某个属性，选择属性值以×××开头的 4.标签名[属性名$=×××]- - -标签名相同，都具有某个属性，选择属性值以×
CSS属性选择器
我的博客
01-24 2453
CSS属性选择器 CSS属性选择器即是通过html的属性来选择元素，下面来分别看下CSS的几种元素选择器。 1.E[att] 选择具有att属性的E元素 input[type]{height: 40px;background-color:red;} ""> type="text" name="name" placeholder="请输入用户名"/> type="p
CSS 属性选择器
歪脖先生的博客
01-11 1669
属性选择器 在HTML中，可以通过元素各种各样的属性，来给元素增加很多附加信息。如通过 width 属性，可以指定元素的宽度；通过 id 属性，可以区分不同的元素，并通过Javascript来控制这些元素的内容和状态。 以往的CSS中，大量使用类选择器来定义样式。由于类选择器并不能说明什么样式服务于什么元素。因此，对于一个大型网站，CSS代码比较庞大，若要修改某个样式，就成为非常头疼的
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值