前端-css初学-选择器

选择器：
选择某一个元素里的某一个或某一类元素
基本选择器：标签选择器（选择一类标签）、类选择器 class（选择所有class属性一致的标签）、id选择器（不能重复，全局唯一）
不遵循就近原则
优先级：id选择器>class选择器>标签选择器

高级选择器：
层次选择器：后代选择器（在某个元素之后），子选择器，相邻兄弟选择器，通用选择器
后代选择器
        body p{
            background: green;
        }
        子选择器
         body>p{
            background: green;
        }
        相邻兄弟选择器:只有一个，同辈相邻
         
        .active +p{
           background: coral;
        }
通用兄弟选择器，当前选中元素的向下的所有兄弟：
.active~p{
            background: coral;
        }

结构伪类选择器：
伪类：

/*ul的第一个元素*/
        ul li:first-child{
            background: green;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
            background: blueviolet;
        }
/*只选中p1,定位到父元素，选择当前元素*/
        p:nth-child(2){
            background: sienna;
        }
        /*选中父元素，下的p元素的第二个，类型 */
        p:nth-of-type(1){
            background: aqua;
        }

属性选择器（常用）
id+class结合
/*存在id属性的元素    属性名，属性名=属性值（正则） */
        /*a[id=first]{*/
        /*    background: aqua;*/
        /*}
        class中有links的元素
         =绝对等于
        *=包含这个元素
        ^=以这个开头
        $=以这个结尾

        a[class*="links"]{
            background: sienna;
        }
        选中href中以http开头的元素
        a[href^=http]{
            background: chartreuse;
        } */
        a[href$=pdf]{
            background: cadetblue;
        }