CSS第二章 选择器合集(Selectors内含详细代码)

CSS选择器用在内部或外部样式中，告诉浏览器这些样式要渲染在哪些HTML元素上

1. 通用选择器
    * 表示所有  *{ }表示当前页面上所有的标签都应用该样式
        * {
    color: red;
}
        因为选中的是所有元素，所以优先级非常低，性能低
2. 标签选择器
    选中某类特定的HTML元素，选择器的名字就是标签的名字，注意标签名不加尖括号
        div {
    background-color: yellow;
}
        优点：快速为当前页面中同种类型的标签统一样式
        缺点：选择太广泛，不能设计差异化样式
        优先级权重值1（最低的）
3. ID选择器（为元素设定样式时推荐少用）
    选中唯一一个指定的元素，注意：ID值与#号之间不允许有空格！
        #d2 {
    color: blue;
}
        注意：要先在标签中加入id属性，再在CSS中选中
        优点：能够非常直观的找到该元素，优先级非常好，权重值100
        但是ID选择器推荐少用，因为ID值经常用于为元素绑定JS脚本，较少用于样式
4. 类选择器
    选中某一类指定的元素，这个类名是可以自定义的
        一个class属性的值，可以写多个，值与值之间使用空格隔开
        注意：使用选择器时点(.)与class值之间不能有空格！
        注意：要先在标签中加入class属性，再在CSS中选中
        优点：复用性很高，在项目中经常使用，优先级的权重值10
5.伪类选择器
    "假的类"——注意伪类选择器的类名是固定的，不能自定义，表示选中某个时刻/状态
        :link{ } 选中"超链接未被访问过"的状态
        :visited{ } 选中"超链接被访问过后"的状态
        :hover{ } 选中"鼠标悬停在元素上方时"的状态
        :active{ } 选中"元素被激活时"的状态（鼠标按住元素不松开）
        注意：a标签的伪类的优先级: link visited hover active
            必须按照指定的顺序
        超链接是有默认样式的，未被访问过是蓝色，激活是红色，访问过后是紫色
        :focus { } 选中"输入框获得焦点时"的状态

6. 群组选择器
    一次使用多个选择器选中多个元素，多个元素使用逗号分隔，可以有空格
        <style>
h4, #p,.r {
        color:red;
}
</style>
        注意：群组选择器不限制选择器必须是同一类型的，可以在一个群组选择器中使用多种不同类型的选择器
7. 属性选择器
    [HTML标签的属性名]{  }  选中包含指定属性名的元素
    [HTML标签的属性名="值"]{  }选中包含指定属性名与属性值的元素
8. 并列选择器
    选中可以同时被多个选择器选中的元素 
        注意：多个选择器之间不能有空格，必须紧挨着写！
        eg
            /* 选中span元素且class值为danger 数字3红色 */
                span.danger{color:red;}
            /* 选中class值同时具有btn与succ的元素 数字4绿色 */
                .btn.succ {color: green;}
9. 后代(包含)选择器
    选中某个元素内的儿子、孙子、重孙子….元素
        div span { }  选中div下的所有span
        易错点：空格容易忘记写
        使用场景：内部结构比较简单，没有那么多相同标签
10. 直接子代选择器
    选中元素下面的直接儿子元素
        div > span { }  选中div下的所有儿子span
11. 兄弟选择器
    选中元素后面的兄弟元素——不要前面的兄弟，也不要子代
        p~span { }  选中p元素后面的span兄弟元素
12. 相邻兄弟选择器
    选中元素后面紧挨着的相邻兄弟元素——不要前面的，也不要有间隔的，也就是最多选中1个
        p+span { } 选中p元素后面紧挨着的那一个span兄弟元素
        eg
            <p></p>
<hr>
<span></span>
                任何元素都不会选中
13 CSS高级选择器
    属性选择器
        元素[属性名] 选中包含指定属性名的元素
            注意：这里的包含注意区分大小写
        元素[属性名="属性值"] 选中包含指定属性名且值为指定值的元素
        元素[属性名^="开头字段"] 选中包含指定属性名，且值为指定开头的元素
        元素[属性名$="结尾字段"] 选中包含指定属性名，且值为指定结尾的元素
        元素[属性名*="包含字段"] 选中包含指定属性名，且值包含指定值的元素
    目标伪类选择器
        要使用a标签的href属性，通过要关联的目标元素的id值进行查找
        目标元素的:target伪类找到元素，指定后续的CSS代码
        file:///C:/DAY15/day15code/05.html#txt1
        表示此时txt1对应的div被触发了
     结构性伪类选择器
        第1个子元素
            :nth-child(1) 或 :first-child
        最后1个子元素
            :nth-child(明确子元素的总个数)  或  :last-child（推荐）
        倍数子元素
            :nth-child(4n) 
        奇数子元素
            :nth-child(odd) 或 :nth-child(2n+1) 或 :nth-child(2n-1)
        偶数子元素
            :nth-child(even) 或 :nth-child(2n)
        倒数第n个子元素
            :nth-last-child(n)