CSS-CSS3的新特性 随学笔记

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>

总结:

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

 



上一篇:【图像检测】基于Combined Separability Filter实现鼻孔和瞳孔检测matlab源码


下一篇:选择器总结