CSS选择器

一、选择器类型

1.标签选择器

        标签名{属性:值}

        对一类标签进行样式的设置

2.类选择器

        .类名{属性:值}

        对同一类名的标签进行设置，一个标签可以有多个类名。

3.id选择器

        #id名{属性:值}

        id最好不要重复，因为后面dom要通过id获取节点。

4.后代选择器

        选择器1  选择器2{属性:值}

        表示对选择器1中的标签后代（不仅仅是直接子元素，也可以是其子元素的子元素）中所有满足选择器二的标签进行样式设置

5.子代选择器

        选择器1>选择器2{属性:值}

        表示对选择器1中标签的直接子元素中所有满足选择器2的标签进行样式设置。

6.交集选择器

         选择器1选择器2{属性:值}

        两个选择器之间没有空格，表示对既满足选择器1，又满足选择器2的标签进行样式设置。

7.并集选择器

        选择器1,选择器2{属性:值}

        表示对只要满足选择器1和选择器2任一选择器的标签进行样式设置。

8、兄弟选择器

        选择器1+选择器2{属性:值}

        相邻兄弟选择器：表示对满足选择器1的标签后面相邻的满足选择器2的兄弟标签进行样式设置。

        选择器1~选择器2{属性:值}

        通用兄弟选择器：表示对满足选择器1的标签后面所有满足选择器2的兄弟标签进行样式设置

9、伪类选择器

1.序选择器

        选择器:first-child{属性:值}选择同一级别标签中的第一个标签

        选择器:first-child{属性:值}选择同一级别标签中的最后标签

        选择器:first-child(n){属性:值}选中同级别的第n个标签 n从1开始

        选择器:nth-child(odd){属性:值}选中同级别的奇数个标签

        选择器:nth-child(even){属性:值}选中同级别的偶数个标签

        选择器:nth-child(xn+y){属性:值} 假设x为2 y为1  选中同级别的第1,3,5...个标签设置样式

2.动态伪类选择器

        E:link（链接伪类选择器）：设置未访问过的E标签（一般为a标签）的样式
​        E:visited（链接伪类选择器 ）：设置访问过的E标签的样式
​        E:active（用户行为选择器）：设置鼠标长按E标签时E标签的样式
​        E:hover （用户行为选择器）： 设置鼠标悬停在E标签上时E标签的样式

3.伪元素选择器

       标签::after
​                表示元素的最后边的部分
​                一般需要结合content这个样式一起使用，
​                通过content可以向after的位置添加一些内容
        标签::before
​                表示元素最前边的部分
​                一般需要结合content这个样式一起使用，
​                通过content可以向before的位置添加一些内容     
​       标签 ::first-letter
​                为第一个字符来设置一个样式
​       标签::first-line    
​                为第一行设置一个样式

10、通配符选择器

        *{属性:值}

        为所有的选择器设置样式