CSS —— 新特性

CSS —— 新特性

 

目录

CSS —— 新特性

一、新增选择器

1. 属性选择器

2. 结构伪类选择器

3. 伪类选择器

二、新特性

1. CSS3盒子模型

2. 滤镜属性

3. 盒子宽度

4. 过渡

#END（部分截图源于b站pink老师）

---

 

一、新增选择器

1. 属性选择器

1.1 属性选择器：可根据元素特定属性的选择元素；

1.2 选择符：

1.3 

① E[att] ：

      input[value] {
          color: skyblue;
      }

② E[att="val"] ：

       input[type=text] {
            color: red;
        }

        <div class="num1">1</div>
        <div class="num2">2</div>
        <div class="num3">3</div>
        <div class="nuc">four</div>

③ E[att^="val"] 、 E[att$="val"] ： ^为开头， $为结尾

       div[class^=num] {
            color: red;
        }
       div[class$=uc]{
            color: red;
        }

④  E[att*="val"] ：

       div[class*=nu]{
            color: red;
        }

2. 结构伪类选择器

2.1 结构伪类选择器：通过文档类型来选择器元素；

2.2 选择符：

注：n 可以代表数字、关键字、公式；

当n为公式时：

2.3 使用：

① first-child 的使用：（last-child 相同）

li:first-child {
    background-color : skyblue;
}

② nth-child（n） 的使用：n 可以代表数字、关键字、公式；

li:nth-child(5) {
     font-size: 28px;
}

        li:nth-child(even) {
            font-size: 26px;
            color: pink;
        }


        li:nth-child(n+5) {
            font-size: 26px;
            color: pink;
        }

③ first-of-type 的使用：（last-of-type相同）

li:first-of-type {
     color: red;
     font-style: italic;
}

④ nth-of-type(n) 的使用：

ul li:nth-last-of-type(5) {
     color: red;
     font-size: 26px;
}


ul li:nth-of-type(odd) {
   font-size: 26px;
}

2.4 nth-child（n）和nth-of-type(n) 区别：

① nth-child 对父元素里面所有子元素进行排序选择，序号是固定，找到第n个子元素，再看是否匹配；

② nth-of-type 对父元素里指定的子元素进行排序，先匹配E，再根据E找第n个子元素；

2.5 类选择器、属性选择器、伪类选择器权重为10；

3. 伪类选择器

3.1 伪类选择器：利用CSS创建新标签元素；

3.2 选择符：

3.3 使用：

        div::before {
            content: '书里总爱';
            background-color: skyblue;
        }
        div::after {
            content: '的傍晚';
            background-color: skyblue;
        }

3.4 注意：

① before、after创建一个元素，但属于行内元素，且在文档树中找不到；

② 必须要有 content 属性；

③伪类选择器、标签选择器权重为1；

 

 

二、新特性

1. CSS3盒子模型

1.1 css3可以通过 box-sizing 来指定盒子模型；

1.2 类型：

① box-sizing：content-box 盒子大小 = width + padding + border；

② box-sizing：border-box 盒子大小 = width；

（使用 ② 的前提： padding + border 不会超过 width）

1.3 使用：

        p {
           width: 150px;
           height: 150px;
           border: 10px solid pink;
           background-color: skyblue;
           padding: 30px;
           box-sizing: border-box;
        }

 

2. 滤镜属性

2.1 filter 属性：将模糊或者颜色偏移等效果应用于元素；

2.2 语法格式：（当前阶段只使用blur属性）

filter : 函数();

 

2.3 使用：数值越大，越模糊；

        img {
            filter: blur(5px);
        }

3. 盒子宽度

3.1 calc() 属性：可改变盒子宽度高度；

3.2 语法格式：（calc括号里进行计算，可以进行加减乘除）

width : calc();
height: calc();

3.3 使用：（子盒子的大小会随着父盒子而变化，但始终与父盒子width差50px，height差100px）

        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
        .box1 {
            width: calc(100% - 50px);
            height: calc(100% - 100px);
            background-color: blue;
        }

4. 过渡

4.1 transition 属性：将元素从一种样式转换为另一种样式；

（经常和 :hover 搭配一起使用）

4.2 语法格式：（哪个元素过渡，就给哪个元素加 transition）

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

① 属性：变化的css属性，如果想要多个属性都变化，属性可以写all；

② 花费时间：单位默认为s；

③ 何时开始：单位为s，可以设置延迟触发的时间；

④ 运动曲线：默认为ease；

4.3 使用：

        div {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            transition: width 0.5s ease;
        }
        div:hover {
            width: 300px;
            background-color: pink;
        }

 

 

#END（部分截图源于b站pink老师）