CSS-CSS3新增的特性随学笔记

最新推荐文章于 2024-09-11 20:31:47 发布

T5Cloud

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量251

点赞数 1

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_43889816/article/details/121537734

版权

CSS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS3新增的特性

CSS3的现状：

新增的CSS3特性有兼容性问题，ie9+才支持
移动端支持优于PC端
不断改进中
应用相对广泛

一、CSS3新增的选择器

CSS3新增的选择器：

CSS3新增了一些选择器，可以更加便捷，更加自由选择目标元素。

1、属性选择器

2、结构伪类选择器

3、伪类选择器

1.属性选择器：

语法：

E[att] 　　选择具有att属性的E元素

E[att="val"] 选择具有att属性且属性值等于val的E元素

E[att^="val"] 　匹配具有att属性且值以val开头的E元素

E[att$="val"] 匹配具有att属性且值以val结尾的E元素

E[att*="val"] 匹配具有att属性且值中含有val的E元素

优点：

1、利用属性选择器就可以不用借助于类或者id选择器

2、属性选择器还可以选择属性=值的某些元素（重点）

3、属性选择器可以选择属性值开头的某些元素

4、属性选择器可以选择属性值结尾的某些元素

<style>
        /* input[value] {
            color: aqua;
        } */
        input[type=text] {
            color: blanchedalmond;
        }
        div[class^="icon"] {
            color: blueviolet;
        }
        section[class$="data"] {
            color: brown;
        }
    </style>
</head>
<body>
    <!-- 1、利用属性选择器就可以不用借助于类或者id选择器 -->
    <!-- <input type="text" name="" id="" value="请输入用户名">
    <input type="text" name="" id=""> -->
    <!-- 2、属性选择器还可以选择属性=值的某些元素  （重点） -->
    <input type="text">
    <input type="password">
    <!-- 3、属性选择器可以选择属性值开头的某些元素 -->
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>hhhhhh</div>
    <!-- 4、属性选择器可以选择属性值结尾的某些元素 -->
    <section class="icon1-data">1234</section>
    <section class="icon2-data">5678</section>
    <section class="icon3-ico">345678</section>
</body>

注意：

类选择器、属性选择器、伪类选择器的权重都为10。

2.结构伪类选择器：

结构伪类选择器主要根据文档结构来选择器元素，常用语改呢根据父级选择器里面的子元素

语法：

E:first-child 　　匹配父元素中的第一个子元素E

E:last-child 　　匹配父元素中的最后一个子元素E

E:nth-child(n) 　　匹配父元素中的第n个子元素E

E:first-of-type 　指定类型E的第一个

E:last-of-type 　指定类型E的最后一个

E:nth-of-type(n) 指定类型E的第n个

其中：

nth-child(n)选择某个父元素的一个或多个特定的子元素。
n可以是数字，关键字和公式；
n如果是数字，就是选择第n个子元素，里面数字从1开始..；
n可以是关键字：even 偶数，odd 奇数；
n可以是公式：常见的公式如下(如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略)。

公式：

2n 偶数

2n+1 奇数

5n 5的倍数 "5"可以为其他值

n+5 从第5个开始（包含第5个）到最后 "5"可以为其他值

-n+5 前五个（包含第5个） "5"可以为其他值

<style>
        /* 1.选择ul里面的第一个孩子 li */
        ul li:first-child {
            background-color: coral;
        }
        ul li:last-child {
            background-color: cornflowerblue;
        }
        ul li:nth-child(2) {
            background-color: sandybrown;
        }
        /* 把所有偶数的孩子选出来 */
        /* ul li:nth-child(even) {
            background-color: sandybrown;
        } */
        /* 把所有奇数的孩子选出来 */
        /* ul li:nth-child(odd) {
            background-color: sandybrown;
        } */
        ul li:nth-child(6) {
            background-color: lightgreen;
        }
    </style>
</head> 
<body>
    <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>
</body>

nth-of-type(n)和nth-child(n)的区别：

nth-child 对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配；
nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子。

<style>
        /* nth-child(n) 从0开始，每次加1，往后面计算   这里边必须是n，不能是其他字母  相当于选择了所有孩子*/
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* nth-child(2n)选择了所有的偶数孩子，相当于even */
        /* ol li:nth-child(n) {
            background-color: pink;
        } */
        /* nth-child(n+5) 从第5个开始选择一直到最后 */
        /* ol li:nth-child(n+5) {
            background-color: pink;
        } */
        /* nth-of-type(n) */
    ol li:nth-of-type(even) {
        background-color: purple;
    }
    /* nth-child 会把所有的孩子都排列序号 
    他在执行的时候首先看nth-child(1)，之后回去看前面的div*/
    section div:nth-child(1) {
        background-color: red;
    }
    /* nth-of-type 会把指定元素的盒子排列序号
    执行的时候首先看：div  (指定的元素)     之后回去看 nth-of-type(1) 第几个孩子 */
    section div:nth-of-type(1) {
        background-color: royalblue;
    }
    </style>
</head> 
<body>
    <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>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>
</body>

总结：

结构伪类选择器一般用于选择父级里面的第几个孩子；
nth-child对父元素里面所有的孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是和否和E匹配；
nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E，找到第n个孩子；
关于nth-child(n)我们要知道n是从0开始计算的，要记住常用公式；
如果是无序列表，我们肯定用nth-child多一些；
类选择器、属性选择器、伪类选择器的权重都为10。

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: seagreen;
        }
        /* div::before 权重是2 */
        div::before {
            /* 这个content是必须写的 */
            content: '佩奇';
        }
        div::after {
            content: 'pig';
        }
    </style>
</head>
<body>
<div>是</div>
</body>

注意：

before和after创建一个元素，但是属于行内元素；

新创建的这个元素在文档树中是找不到的，所以我们成为伪元素；

语法：element::before{}

before和after必须有content属性

before在父元素内容的前面创建元素，after在父元素内容的后面插入元素；

伪元素选择器和标签选择器一样，权重为1；

二、CSS3的盒子模型

CSS3中可以通过box-sizing来指定盒模型，有两个值：即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing:content-box 盒子大小为width+padding+border（以前默认的）；

2、box-sizing:border-box 盒子大小为width。

如果盒子模型我们改为了box-sizing:border-box，那padding和border就不会撑大盒子了。（前提是padding和border不会超过width的宽度）

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: pink;
            border: 20px solid red;
            padding: 15px;
            /* CSS3盒子模型  最终大小就是width */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>
        小猪佩奇
    </div>
    <p>小猪佩奇</p>
</body>

三、CSS3新增的的过渡

过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种形式变换为另一种样式时为元素添加效果。

过渡动画：是从一个状态渐渐地过渡到另外一个状态。

可以让我们的页面更好看，更动感十足，虽然低版本浏览器不支持（ie9以下版本）但是不会影响页面布局。

我们现在经常和:hover 一起搭配使用。

transition ：要过度的属性花费时间运动曲线何时开始；

1.属性：想要变化的css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过度，写一个all就可以。

2.花费时间：单位是秒（必须写单位) 比如0.5s。

3.运动曲线：默认是ease。

参数：linear 匀速 ease 逐渐慢下来 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速。（可以省略）

4.何时开始：单位是秒（必须写单位）可以设置延迟触发时间默认是0s （可以省略）。

<style>
        div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
        div:hover {
            transition: width 1s ease-in-out 0s,height 1s ease-in-out 1s;
            /* 如果想要写多个属性，用逗号分割。想要所有属性都变化，就写all就可以 */
            /* transition: all 1s; */
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div></div>
</body>

四、CSS3的其它特性（了解）

1。图片变模糊

CSS3滤镜filter：

filter CSS属性将模糊或颜色偏移的图形效果应用于元素。

filter：函数(); 例如：filter:blur(5px); blur模糊处理数值越大越模糊

<style>
        img {
            /* blur 是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter:blur(5px)
        }
        img:hover {
            filter: blur(0);
        }
    </style>
</head>
<body>
        <img src="images/bg.jpg" alt="">
    
</body>

2.计算盒子宽度width:calc 函数

CSS3 calc函数：

calc()此CSS3函数让你在声明CSS属性值是执行一些计算。

width:calc(100%-80px);

括号里面可以使用+ - * /来进行计算。

<style>
        .father {
            width: 200px;
            height: 200px;
            background-color: royalblue;
        }
        .son {
            /* width: calc(150px+100px); */
            /* 需求我们的子盒子宽度永远比父盒子小30px */
            width: calc(100%-30px);
            height: 30px;
            background-color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- 需求我们的子盒子宽度永远比父盒子小30px -->
    <div class="father">
        <div class="son">

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

T5Cloud

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-CSS3新增的特性随学笔记

CSS3新增的特性CSS3的现状：新增的CSS3特性有兼容性问题，ie9+才支持移动端支持优于PC端不断改进中应用相对广泛一、CSS3新增的选择器CSS3新增的选择器：CSS3新增了一些选择器，可以更加便捷，更加自由选择目标元素。 1、属性选择器 2、结构伪类选择器 3、伪类选择器1.属性选择器：语法： E[att] 　　选择具有att属性的E元素 E[att="val"] 选择具有at...
复制链接

扫一扫