2.CSS3选择器

# 2.CSS3选择器

- 新增的选择器

1. 关系选择器

    E+F:下一个满足条件的兄弟元素节点

    E~F:与E元素同级的所有F元素节点

2. 属性选择器

    E[attr~='val']:attr属性中存在一个独立的val值

    E[attr|='val']:attr属性中val开头或val-开头的

    E[attr^='val']:attr属性中val开头

    E[attr$='val']:attr属性中val结尾

    E[attr*='val']:attr属性存在val值

3. 伪元素选择器

    //文本框中提示信息

    E::placeholder{//只能设置下面一个属性

        color:#ccc;

    }

    //选中后的效果

    E::selection{//只能设置下面三个属性

        color:#ccc;

        

        text-shadow:1px 2px black;

    }

4. 伪类选择器：被选中元素的一种状态

    E:not(.demo)  class!='demo'的E元素  

    :root  根标签选择器。在HTML里，选择html节点  

    E:target  目标元素，多用于锚点 

 

    ----下面都要考虑其他同级元素，所以用的不多。是所有子元素

    E:first-child  子元素中第一个元素且是E元素

    E:last-child  子元素中最后一个元素且是E元素

    E:only-child  子元素中只有一个元素且是E元素

    E:nth-child(n)  子元素中第n个元素且是E元素

    E:nth-last-child(n)  子元素中倒数第n个元素且是E元素

    ----上面都要考虑其他同级元素，所以用的不多

 

    ----下面不考虑其他同级元素，只考虑匹配的元素

    E:first-of-type  子元素中第一个E元素

    E:last-of-type  子元素中最后一个E元素  

    E:only-of-type  子元素中只有一个E元素  

    E:nth-of-type(n)  子元素中第n个E元素素  

    E:nth-of-last-type(n)  子元素中倒数第n个E元素

    ----上面不考虑其他同级元素，只考虑匹配的元素

 

    E:empty  E元素中什么节点都没有（可以有注释）  

    E:checked  被选中的E元素  

    E:enabled  可以使用的E元素  

    E:disabled  带有disabled属性的E元素  

    E:read-only  带有readonly属性的E元素  

    E:read-write  带有readwrite属性的E元素  

 

以上是markdown格式的笔记