css3(1)

之前的css属性选择器包括：类选择器，id选择器，标签选择器，关联选择器，组合选择器，伪类选择器等

css3属性选择器

---

        /*1、有class属性的input属性*/
        input[class] {
            background-color: red;
        }
        
        /*2、class属性是first的元素*/
        input[class=first] {
            background-color: blue;
        }
        
        /*3、class=first的元素*/
        [class=first] {
            background-color: green;
        }
        
        /*4、input的name属性值以first开头，^=是以什么开头*/
        input[name^=first] {
            background-color: yellow;
        }
        
        /*5、input的name属性值以name结尾，$=是以什么结尾*/
        input[name$=name] {
            background-color: lightgrey;
        }
        
        /*6、input的name属性值包含stna字符串的元素，*=是包含什么*/
        input[name*=stna] {
            background-color: pink;
        }

需要注意的就是：元素与后面[ ]之间，不要有空格，否则会失效

css3伪类选择器

---

css2中：
:hover, :link, :active, :visited

E:fisrt-child  E的父元素的第一个子元素
E:last-child  E的父元素的最后一个子元素
:root 
E:nth-child(n) E的父元素的第n个子元素
E:nth-last-child(n) E的父元素的倒数第n个子元素
E:empty 不包含任何内容的元素
E:enabled 匹配可用的元素
E:disabled 匹配不可用的元素
E:check 匹配选中的元素

css3伪对象选择器

---

:before：在盒子内部的前面插入一个行显示的盒子
:after：在盒子内部的后面插入一个行显示的黑子

以上2个都是inline类型，设置宽高生效的话，需要display：block；

       #shi {
            border: 1px solid red;
        }

        #shi:before {
            content: '锄禾日当午，';
            width: 150px;
            background-color: #f00;
            display: inline-block;
        }

        #shi:after {
            content: '谁知盘中餐，';
            width: 200px;
            background-color: #036;
            display: inline-block;
        }

注意：这个选择器必须和content一起使用，即使没有内容插入。

demo

---

Paste_Image.png