首页 前端知识 CSS3 新特性

CSS3 新特性

2024-08-20 09:08:13 前端知识 前端哥 856 696 我要收藏

目录

CSS3新增选择器

属性选择器

结构选择器

伪元素选择器 

盒子模型

图片模糊

calc函数

过渡 


CSS3新增选择器

  • 属性选择器
  • 结构伪类选择器 : 根据文档结构选择元素.
  • 伪元素选择器

属性选择器

属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器

假如我有如下的标签: 

<body>
    <input type="text" name="" id="" value="123">
    <input type="password" name="" id="">
</body>

我想要选择 input标签, 然后必须具有value属性: 

        input[value] {
            color: pink;
        }

 我不仅要选择有什么属性, 我还要选择属性=对应值的属性: 

        input[value=123] { /*= 后面可以加引号也可以不加引号*/
            color: pink;
        }

 现在假设我要选择下面这四个标签, 我该如何做呢 ? 

    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>

第一想到的是可以使用并集选择器, 但是写起来很麻烦, 我们可以使用 h5新增特性: 

        div[class^=icon] {
            color: red;
        }

^=表示匹配的必须是icon开头的值. 

当然我也可以选择以$=E来选择以E结尾的元素, 或者是*=E, 表示值含有E的属性.

注意: 类选择器, 属性选择器, 伪类选择器 权重都是10.

结构选择器

下面是结构选择器的样式:

例如:

<body>
  <ul>
    <li>我是第1个孩子</li>
    <li>我是第2个孩子</li>
    <li>我是第3个孩子</li>
    <li>我是第4个孩子</li>
    <li>我是第5个孩子</li>
    <li>我是第6个孩子</li>
  </ul>
</body>

我要选择ul中的第一个li:

    
    ul li:first-child { /*表示我选择了里面所有li标签中, 第一个li*/
      /* 结构伪类选择器 */
      background-color: pink;
    }

最后一个li使用: 

    ul li:last-child { /*ul中最后一个li元素*/
      background-color: pink;
    }

当然也可以选择某个父元素中一个或者多个特定的子元素: nth-child(n)

  • n 可以是数组, 公式和关键字
  • 如果n是数字, 就是选择第n个元素, 里面数字是从1开始 

例如我想要选择上述案例中的第二个li : 

    ul li:nth-child(2) {
      background-color: blue;
    }

如果nth-child中的参数写的是关键字, 例如even : 

    <ul>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ul>

我想要将这里面的第偶数个li改为灰色: 

        ul li:nth-child(even) {
            background-color: #ccc;
        }

然后将奇数的孩子选择出来, 然后改为另外一种颜色:

        /* 2.把所有的奇数 odd的孩子选出来 */
        ul li:nth-child(odd) {
            background-color: gray;
        }

效果如下: 

nth-child使用 公式

    <ol>
        <li>我是第1个孩子</li>
        <li>我是第2个孩子</li>
        <li>我是第3个孩子</li>
        <li>我是第4个孩子</li>
        <li>我是第5个孩子</li>
        <li>我是第6个孩子</li>
        <li>我是第7个孩子</li>
        <li>我是第8个孩子</li>
    </ol>
        ol li:nth-child(n) {
            background-color: pink;
        }

表示n从0开始, 每次+1, 往后面计算, 这里必须是n, 不能是其他的字母, 如果写了n, 代表选择了所有的孩子:

        ol li:nth-child(-n + 3) {
            background-color: pink;
        }

效果如下: 

注意 : 此处需要注意nth-of-type和nth-child() 有所不同, type会过滤前面的非指定的元素, 然后去看第几个孩子, 但是nth-child是不会过滤非指定元素, 会将所有的child进行匹配满足括号内的内容.

伪元素选择器 

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。

注意: 

  • before 和 after 创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
  • 语法: element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样,权重为 1 

例如下面有一个div,, 使用了伪元素, 其声明是before还是after的效果如下: 

通过代码验证: 

<!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>伪元素选择器before和after</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须要写的 */
            /* display: inline-block; */
            content: '我';
            /* width: 30px;
            height: 40px;
            background-color: purple; */
        }
        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>
<body>
    <div>
        是
    </div>
</body>
</html>

  无论是before还是after, 都是行内元素. 可以使用block来改变盒子模型.

伪元素快速清除浮动: 

 给父元素添加一个after伪元素, 

 这个伪元素的content为空, 伪元素本来为行内元素, 现在需要将其设置为块级元素, 也就是block: 

    .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

盒子模型

我们在设置了一个盒子的高度和宽度和边框之后, 如果还想添加内边距, 那么就会撑大盒子,  设置内边距之后, 如果我们想要保持原来盒子的大小, 就不得不去减去高度和宽度, 这样子就很麻烦, 于是css3新推出了一个特性, 可以使用box-sizing来指定盒子模型

        box-sizing有两个值, 即content-box, 和border-box, 这样我们计算盒子大小的方式就发生了变化,

分为两种情况: 

  • 以前是border + width/height + padding, 也就是默认的box-sizing: context-box;
  • 第二种是box-sizing : border-box 盒子大小为width

如下: 

<!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>CSS3盒子模型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            box-sizing: content-box;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* css3 盒子模型  盒子最终的大小就是 width  200 的大小 */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        小猪乔治
    </div>
    <p>
        小猪佩奇
    </p>
</body>
</html>

盒子模型改为border-box之后, 盒子的大小就不会被padding撑大了

图片模糊

使用filter : blur(npx) 来设置img图片的模糊, n越大越模糊: 

img {
    filter: blur(2px);
}

calc函数

我们有的时候需要使用百分号%来设置宽度或者定位, 但是这个还不够, 有时候还需要搭配margin来获取更精确位置, 但是这很不方便, 尤其是在盒子模型中.

比如我们使用绝对定位, 让一个 图片居中显示, 可能会用到: 

img {
    position: absolute;
    top: 50%;
    margin-top: -20px; /*自己高度的一般*/
}

我们可不可以直接将两行计算在一行, 当然可以, 使用calc函数: 

img {
    position: absolute;
    top: calc(50% - 20px);
}

过渡 

        过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画: 是从一个状态 渐渐的过渡到另外一个状态
        可以让我们页面更好看,更动感十足,虽然 低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局。经常与hover搭配使用.

        使用transition这个属性来实现.如法如下: 

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

  •  属性 : 想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。
  • 花费时间: 单位是 秒(必须写单位) 比如 0.5s
  • 运动曲线: 默认是 ease (可以省略)
  • 何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)

<!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>CSS3 过渡效果</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
            /* transition: 变化的属性 花费时间 运动曲线 何时开始; */
            /* transition: width .5s ease 0s, height .5s ease 1s; */
            /* 如果想要写多个属性,利用逗号进行分割 */
            /* transition: width .5s, height .5s; */
            /* 如果想要多个属性都变化,属性写all就可以了 */
            /* transition: height .5s ease 1s; */
            /* 谁做过渡,给谁加 */
            transition: all 0.5s;
        }
        div:hover {
            width: 400px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例: 进度条

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bar {
      width: 150px;
      height: 15px;
      padding: 1px;
      border: 1px solid red;
      border-radius: 7px;
    }
    .bar_in {
      width: 50%;
      height: 100%;
      background-color: red;
      transition: all .6s;
    }

    .bar:hover .bar_in{
      width: 100%;
    }

  </style>
</head>
<body>
  <div class="bar">
    <div class="bar_in">

    </div>
  </div>
</body>
</html>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16264.html
标签
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!