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格式的笔记

猜你喜欢

转载自www.cnblogs.com/lanshanxiao/p/12907341.html