css新增特性

最新推荐文章于 2024-05-23 17:56:03 发布

格物致知0919

最新推荐文章于 2024-05-23 17:56:03 发布

阅读量66

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_73838148/article/details/130476562

版权

1.属性选择器

类选择器、属性选择器和伪类选择器权重都是0010

<style>
        /* 必须是具有value属性的input表单元素 */
        input[value] {
            color: aqua;
        }

        /* 把具有type属性并且该属性值为text的input表单元素选择出来 */
        input[type=text] {
            color: palevioletred;
        }

        /* 选择首先是div，然后具有class属性并且属性值必须是icon开头的元素 */
        div[class^=icon] {
            color: plum;
        }

        /* 选择首先是section，然后具有class属性并且属性值必须是data结尾的元素 */
        section[class$=data] {
            color: royalblue;
        }

        /* 选择首先是section，然后具有class属性并且属性值含有data的元素 */
        section[class*=data] {
            color: royalblue;
        }
</style>

2.结构伪类选择器

属性	描述
:first-child	选择父元素的第一个子元素
:last-child	选择父元素的最后一个子元素
:nth-child(n)	选择父元素的第n个子元素
:first-of-type	指定类型的第一个
:last-of-type	指定类型的最后一个
:nth-of-type(n)	指定类型的第n个

n可以是数字，关键字和公式。
n如果是数字，就选择第n个子元素，数字从1开始。
n可以是关键字：even偶数，odd奇数。

<style>
    /* 1. 选出第偶数个孩子 */
    ul li:nth-child(even) {
        background-color: #b8b7b7;
    }

    /* 2. 选出第奇数个孩子 */
    ul li:nth-child(odd) {
        background-color: white;
    }

    /* 3. nth-child(n) 从0开始每次加1往后面计算，这里面必须是n，不能是其他的字母*/
    ol li:nth-child(n) {
        background-color: hotpink;
    }
</style>

nth-of-type和nth-child的区别

<!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>
        /* nth-child会把所有的盒子都排列序号 */
        /* 执行的时候首先看：nth-child(1)之后再去看前面的div */
        section div:nth-child(1) {
            background-color: pink;
        }

        /* nth-child会把指定元素的盒子排列序号 */
        /* 执行的时候首先看：div指定的元素之后再去看前面第几个孩子 */
        section div:nth-of-type(1) {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <section>
        <p>rikimaru</p>
        <div>daniel</div>
        <div>rikiriki</div>
    </section>
</body>

</html>

3.伪元素选择器

选择符	描述
::before	在元素内部的前面插入元素
::after	在元素内部的后面插入元素

before和after创建一个元素，但是属于行内元素。
新创建的这个元素在文档树中是找不到的，所以称之为伪元素。
语法：element::before{}。
before和after必须有content属性。
伪元素选择器和标签选择器一样权重为1。

伪元素字体图标

<!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>伪元素字体图标</title>
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?e4ufc2');
            src: url('fonts/icomoon.eot?e4ufc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?e4ufc2') format('truetype'),
                url('fonts/icomoon.woff?e4ufc2') format('woff'),
                url('fonts/icomoon.svg?e4ufc2#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 {
            font-family: 'icomoon';
            position: absolute;
            top: 10px;
            right: 10px;
            content: '';
            font-size: 18px;
        }
    </style>
</head>

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

</html>

4.盒子模型

box-sizing:content-box盒子大小为width+padding+border
box-sizing:border-box盒子大小为width

5.其他特性

5.1.滤镜filter

img {
    width: 300px;
    height: 300px;
    filter: blur(5px);
    /* 括号里数字越大模糊效果越大，要加单位，为0时表示不模糊 */
}

在这里插入图片描述

5.2.cala函数

.father {
    width: 300px;
    height: 200px;
    background-color: lightgreen;
}

.son {
    /* 运算符左右要加空格 */
    width: calc(100% - 30px);
    height: 80px;
    background-color: lightpink;
}

在这里插入图片描述

5.3.过渡

谁过渡给谁加该属性。

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

属性：想要变化的css属性，宽度、高度、背景颜色、内外边距都可以。如果想要所有属性都变化，属性写all就可以了。
花费时间：必须写单位（秒）。
运动曲线：默认是ease（可省）。
何时开始：必须写单位（秒），可以设置延迟触发时间，默认0s。（可省）

div {
    width: 200px;
    height: 100px;
    background-color: lime;
    transition: width .5s ,height .5s;
}

div:hover {
    width: 400px;
    height:200px;
}