CSS3新特性之选择器

一.属性选择器

            属性选择器可以根据元素的属性及属性值来选择元素

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

    <style>
        input[value] {
            color: brown;
        }
        
        input[type=text] {
            color: cadetblue;
        }
        
        div[class^=icon] {
            color: red;
        }
        
        section[class$=data] {
            color: blue;
        }
    </style>

---

二.结构伪类选择器

        结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

        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个

<style>
        ul li:first-child {
            background-color: yellow;
        }
        
        ul li:last-child {
            background-color: yellow;
        }
        
        ul li:nth-child(2) {
            background-color: red;
        } 
        /* 选取奇偶数 */
        
        ul li:nth-child(even) {
            background-color: yellow;
        }
        
        ul li:nth-child(odd) {
            background-color: skyblue;
        }
        
        ol li:nth-child(3n) {
            background-color: #789456;
        }
        /* nth-child 会把所有盒子都排序号 先看后面，再看前面*/
        
        section div:nth-child(1) {
            background-color: rgb(56, 143, 146);
        }
        /* nth-of-type会把指定元素盒子排列序号 */
        
        section div:nth-of-type(1) {
            background-color: rgba(192, 8, 8, 0.473);
        }
    </style>

        区别：
        nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配

        nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第N个孩子

---

三.伪元素选择器

        CSS 伪元素用于设置元素指定部分的样式。

        例如，它可用于：

• 设置元素的首字母、首行的样式
• 在元素的内容之前或之后插入内容
• ::before 在元素内部的前面插入内容
  ::after     在元素内部的后面插入内容

      <style>
          div {
              width: 200px;
              height: 200px;
              background-color: pink;
          }
          
          div::before {
              display: inline-block;
              content: "我";
              width: 30px;
              height: 40px;
              background-color: purple;
          }
          
          div::after {
              content: '你';
          }
      </style>

总结：

        CSS3的新特性除了三种新的选择器，还包括盒子模型，CSS3过渡等新特性。后面会陆续更新。

欢迎指正。