8.21 C3选择器

要点总结

        兄弟选择器
        1、选择指定标签后面所有的兄弟节点
        p~ul{
            background-color: red;
        }
         属性选择器
        2、选择属性以指定字符串开头的标签
        li[index^="ab"]{
            background-color: red;
        }
        
        3、选择以指定字符串结尾的标签
        li[class$="b"]{
            background-color: red;
        }
        
        4、选择属性中包含某个字符串的标签
        li[class*="x1"]{
            background-color: red;
        }
        
        5、选择第一个指定的标签
        p:first-of-type{
            background-color: red;
        }
        
        6、选择最后一个指定的标签
        p:last-of-type{
            background-color: red;
        }
        
        7、选择在其父级下该类型唯一的一个子元素
           该子元素可以有其他类型不一样的兄弟元素
        p:only-of-type{
            background-color: yellow;
        }
        
        8、选择其父级下的第n个标签,只在指定的子元素中查找
        p:nth-of-type(1){
            background-color: red;
        }
        
        9、选择在其父级下的唯一的一个子元素
              选中的子元素完全唯一，其父级只有这一个子元素,只要有兄弟节点就不满足条件
        h3:only-child{
            background-color: red;
        }
        p:only-child{
            background-color: red;
        }
        
        10、选择其父级下的第n个子元素,从其父级的第一个子元素开始计数，一直数到第n个,如果找到的标签与指定的相同，那么会选中，否则没反应
        p:nth-child(2){
            background-color: red;
        }
        p:nth-of-type(3){
            background-color: red;
        }
        
        11、选择器父级下的倒数第n个子元素，从最后一个开始计数，一直数到第n个,如果找到的标签与指定的相同，那么会选中，否则没反应
        p:nth-last-of-type(3){
            background-color: red;
        }
        12、last-child 选择最后一个子节点
        p:last-child{
            background-color: red;
        }
        
        13、root根节点
        :root{
            background-color: #BCBCBC;
        }
        
        14、empty选择空节点，如果有文本内容，即使是一个空格，也不算空标签
        :empty{
            background-color: red;
        }
        
        15、target选择当前活动状态的a标签指向的目标
        :target{
            background-color: #AAAAAA;
            color: #fff;
        }
        
        16、enabled选择可操作的input标签
        :enabled{
            height: 40px;
        }
        
        17、disabled选择不可操作的input标签
        :disabled{
            height: 50px;
        }
        
        18、checked选择被选中的input标签
        :checked{
            width: 50px;
            height: 50px;
        }
        
        19、not()选择除了指定标签的其他所有标签
        div:first-of-type :not(p){
            background-color: red;
        }
        
        20、选择指定标签里面被选中的文本内容
        ::selection{
            color: #ffffff;
            background-color: #BCBCBC;
        }

与js有很多的共同之处，都是选择出满足各种条件的元素，不过一个是应用于 js 里，一个应用于 css 里。
其中容易混淆于模糊的点也一样：
1 . only-of-type 与 only-child ------ 前者强调的是子元素中指定标签唯一 后者则是子元素必须位移
2 . nth-of-type() 与 nth-child() ------ 前者强调某类标签中的第几个 后者则是子元素中的第几个，如果找到的标签与指定的相同，那么会选中，否则没反应
3 . :empty -------------有空格也不能算作空

！！！原生js的内容需要进行回顾，在学习过jQuery之后对于原生js所具有的写法和内容开始与jq混淆了！！！