标签选择器：选中的是当前界面中的所有标签，而不能单独选中一个标签
id选择器：根据指定的id名称找到对应的标签
格式：
#id名称{ 属性名：属性值}
注意点：
1.每个HTML标签都有一个id属性
2.在一个界面中id名称不可以重复
3.一般情况下，仅仅为了设置样式，不使用id，前端开发中，id是留给js使用的
类选择器：根据指定的类名称找到对应的标签
格式：
.class名称{属性名：属性值}
注意点：
1.每个HTML标签都有一个class属性
2.在一个界面中class名称可以重复
3.类名就是专门来给某个特定的标签设置样式
4.在HTML中每个标签可以同时绑定多个类名
后代选择器：找到指定的所有后代标签
先找到名称叫做标签名称1的标签，然后再在这个标签下面去查找所有名称叫做标签名称2的标签
格式：
选择器1 选择器2{属性名：属性值}
注意点：
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子，也包括孙子/重孙子 ，只要最终是放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
子元素选择器：找到指定标签中所有特定的直接子元素
先找到名称叫做标签名称1的标签，然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素
格式：
选择器1>选择器2{属性名：属性值}
注意点：
1.子元素选择器只会查找儿子，不会查找被嵌套的标签
2.子元素选择器之间需要用>符号连接，并且不能有空格
3.子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
交集选择器：给所有选择器选中的标签中，相交的那部分标签设置属性
格式：
选择器1选择器2{属性名：属性值}
注意点：
1.选择器和选择器之间没有任何的连接符号
2.选择器 可以使用标签名称/id名称/class名称
并集选择器：给所有选择器选中的标签设置属性
格式：
选择器1，选择器2{属性名：属性值}
注意点：
1.并集选择器必须使用，来连接
2.选择器 可以使用标签名称/id名称/class名称
兄弟选择器
相邻兄弟选择器 CSS2：给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式：
选择器1+选择器2{属性名：属性值}
注意点：
1.相邻兄弟选择器必须通过+连接
2.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
通用兄弟选择器 CSS3：给指定选择器后面的所有选择器选中的所有标签设置属性
格式：
选择器1~选择器2{属性名：属性值}
注意点：
1.通用兄弟选择器必须通过~连接
2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有被隔开都可以选中
序选择器：CSS3中新增的选择器
1.同级别的第几个
:first-child：选中同级别中的第一个标签
:last-child：选中同级别中的最后一个标签
:nth-child(n/odd/even/xn+y)：选中同级别中的第n/奇数/偶数/自定义个标签
:nth-last-child(n):选中同级别中倒数第n个标签
:only-child：选中父元素中唯一的元素
注意点：不区分类型
2.同类型的第几个
:first-of-type：选中同级别中同类型的第一个标签
:last-of-type：选中同级别中同类型的最后一个标签
:nth-of-type(n/odd/even/xn+y)：选中同级别中同类型的第n/奇数/偶数/自定义个标签
:nth-last-of-type(n)： 选中同级别中同类型的倒数第n个标签
:only-of-type：选中父元素中唯一类型的某个标签
属性选择器：根据指定的属性名称找到对应的标签
[attribute]：根据指定的属性名称找到对应的标签
[attribute=value]：找到有指定属性，并且属性的取值等于value的标签，然后设置属性
最常见的应用场景：用于区分input属性
属性的取值以什么开头
[attribute|=value]：CSS2
[attribute^=value]：CSS3
两者之间的区别：
CSS2中的只能找到value开头的，并且value是被-和其他内容隔开的
CSS3中只要是以value开头的都可以找到，无论有没有被-隔开
属性的取值以什么结尾
[attribute$=value]：CSS3
属性中包含有个特定的值：
[attribute~=value]：CSS2
[attribute*=value]：CSS3
两者之间的区别：
CSS2中的只能找到独立的单词，也就是包含value，并且value是被空格隔开的
CSS3中只要包含value就可以找到
通配符选择器：给当前界面上所有标签设置属性
格式：
*{属性名：属性值}
注意点：
由于通配符选择器是设置界面上所有的标签属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能比较差，在企业开发中一般不会使用通配符选择器
伪元素选择器：给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素
格式：
标签名称::before/after{属性名：属性值}
网友评论