一、属性选择器

属性选择器可以根据元素特定属性来选择元素，这样就可以不用借助于类或者ID选择器了。

选择符

简介

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

注意：类选择器、属性选择器、伪类选择器，权重为10

二、结构伪类选择器

结构伪类选择主要更具文档结构来选择元素，常用于父级选择器里面的子元素

选择符

简介

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可以是数字，关键字和公式，公式从0开始，每次自动加1，例如：nth-child(n)，表示选中所有孩子；
  • n如果是数字，就是选择第n个子元素，里面数字是从1开始的；
  • n可以是关键字：even偶数，odd奇数；

总结：

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

三、伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

选择符

简介

::before

在元素内部的前面插入内容

::after

在元素内部的后面插入内容

注意：

  • ​​before​​​和​​after​​创建一个元素，但是属于行内元素；
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素；
  • 语法：​​element::before{}​​；
  • ​​before​​​和​​after​​​必须有​​content​​属性；
  • ​​before​​​在父元素内容的前面创建元素，​​after​​在父元素内容的后面插入元素；
  • 伪元素选择器和标签选择器一样，权重为1；

伪元素选择器的使用

场景1：伪元素字体图标

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>@font-face {
           font-family: 'icomoon';
           src: url('fonts/icomoon.eot?xfjj9q');
           src: url('fonts/icomoon.eot?xfjj9q#iefix') format('embedded-opentype'),
               url('fonts/icomoon.ttf?xfjj9q') format('truetype'),
               url('fonts/icomoon.woff?xfjj9q') format('woff'),
               url('fonts/icomoon.svg?xfjj9q#icomoon') format('svg');
           font-weight: normal;
           font-style: normal;
           font-display: block;
       }

       div {
           position: relative;
           width: 200px;
           height: 30px;
           background-color: skyblue;
           margin: 200px auto;
       }
       div::after {
           position: absolute;
           top: 5px;
           right: 10px;
           font-family: 'icomoon';
           content: '';
       }</style>
</head>

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

</html>

代码运行效果：

CSS3新特性_选择器

场景2：仿土豆网显示隐藏遮罩案例

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div {
            position: relative;
            width: 200px;
            height: 133px;
            background-color: pink;
            margin: 200px auto;
        }

        div img {
            width: 100%;
        }

        div::before {
            content: '';
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
        }
        div:hover::before {
            display: block;
        }</style>
</head>

<body>
    <div>
        <img src="images/image.png" alt="">
    </div>
</body>

</html>

代码运行效果：

CSS3新特性_选择器_02


CSS3新特性_选择器_03

场景3：伪元素清除浮动

四、CSS3 盒子模型

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

可以分为两种情况：
1、​​​box-size: content-box;​​​ 盒子大小为width + padding + border（以前默认的）;
2、​​​box-size: border-box;​​ 盒子大小为width；

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

五、CSS3滤镜filter

filter属性将没收或颜色偏移等图形效果应用于元素

语法：

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

六、CSS3 计算盒子宽度calc函数

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

语法：

width: calc(100%-80px);

括号里可以使用​​+ 、 - 、 * 、 /​​运算符

七、CSS3 过渡

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

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

经常和​​:hover​​一起搭配使用

语法：

transition:

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

2、花费时间： 单位是秒（必须写单位），比例0.5s；

3、运动曲线：默认是ease；

属性值

效果

ease

逐渐慢下来

linear

匀速

ease-in

加速

ease-out

减速

ease-in-out

先加速后减速

4、合适开始：单位是秒（必须写单位）可以设置延迟触发事件，默认是0秒（可以省略）；

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div {
            width: 200px;
            height: 133px;
            background-color: pink;
            margin: 200px auto;
            transition: width 3s ease-in-out 0s;
        }
        div:hover {
            width: 300px;
        }</style>
</head>

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

</html>

如果想要变化多个属性，可以使用​​,​​，例如：

transition: width 3s ease-in-out 0s, height 3s ease-in-out 0s;