首页 > 其他分享> 文章详细

CSS-CSS3的新特性随学笔记

2021-11-25 15:03:07 阅读：130 来源： 互联网

标签：CSS3 color 随学元素 nth background child 选择器 CSS

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。

3.伪元素选择器：

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。方法： ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容

<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>

标签：CSS3,color,随学,元素,nth,background,child,选择器,CSS
来源： https://www.cnblogs.com/T5Cloud/p/15601667.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS-CSS3的新特性 随学笔记

CSS-CSS3的新特性随学笔记