标签选择器
作用：根据指定的标签名称，在界面中找到所有该名称标签然后设置属性
格式： 标签名称{
属性：值；
}
注意点：标签选择器选中的是所有该名称的标签
id选择器
id名称只能有字母数字和下划线组成，不能以数字开头
作用：根据指定的id名称，在界面中找到该id
格式： #id名称{
属性：值；
}
类选择器
格式： .类名{
属性：值；
}
注意点：class名称只能有字母数字和下划线组成，不能以数字开头
一个标签可以设置多个类名 格式：class=类名1 类名2 （空格隔开
id选择器和类选择器的区别：
1.id名称不可以重复，类名可以重复
2.一个标签只能绑定一个id，可以绑定多个类名
后代选择器
作用：找到所有标签的后代标签，设置属性
格式：选择器1 选择器2{
属性：值；
}
注意点：后代选择器标签之间用空格隔开
后代选择器不仅仅包括儿子还包括孙子....
后代选择器不仅仅可以用标签选择器还可以用其他选择器
子元素选择器
作用：找到所有标签的子元素标签，设置属性
格式：选择器1>选择器2{
属性：值；
}
注意点：子元素选择器只会找到儿子
交集选择器
作用：给相交/重复的部分设置属性
格式：选择器1选择器2{
}
并集选择器
作用：给所有选中的标签设置属性
格式：选择器1，选择器2{
属性：值；
}
兄弟选择器
相邻兄弟选择器
作用：给指定选择器后面紧跟的那个标签设置属性
格式： 选择器1+选择器2{
属性：值；
}
通用兄弟选择器
作用：给指定选择器后面所有的指定标签设置属性
格式： 选择器1~选择器2{
属性：值；
}
序选择器
同级别的第几个
：first-child 选中同级别的第一个标签
：last-child 选中同级别的最后一个标签
：nth-child（n） 选中同级别的第n个标签
：nth-last-child（n）选中同级别的倒数第n个标签
：only-child 选中父元素中唯一的子元素
：nth-child（odd） 选中同级别的所有奇数标签
：nth-child（even） 选中同级别的所有偶数标签
：nth-child（xy+n） 选中同级别的所有xy+n标签（x和y是用户自定义的，n是一个计数器、从0开始递增）列：2n+0（2*0+0、2*1+0、2*2+0....依次递增）、2n+1、3n+0、n+1.....
同级别同类型的第几个
：first-of-type 选中同级别同类型的第一个标签
：last-of-type 选中同级别同类型的最后一个标签
：nth-of-type（n） 选中同级别同类型的第n个标签
：nth-last-of-type（n）选中同级别同类型的倒数第n个标签
：only-of-type 选中父元素中类型唯一的子元素
：nth-of-type（odd） 选中同级别同类型的所有奇数标签
：nth-of-type（even） 选中同级别同类型的所有偶数标签
属性选择器
作用：根据指定的属性找到对应的标签，设置属性
格式：
1. [attribute]
标签 [属性]{
属性：值；
}
找有有指定属性的指定标签
2. [attribute=value]
标签 [属性=值]{
属性：值；
}
找有有指定属性等于指定值的指定标签、最常见的应用场景就是用来区分input
3.
属性的取值是以什么开头的
[attribute|=value]
[attribute^=value]
属性的取值是以什么结尾的
[attribute$=value]
属性的取值是否包含某个特定的值
[attribute~=value]
[attribute*=value]
通配符选择器
*
选中页面中所有的标签
注意点：由于通配符选择器要设置页面上所有标签的属性，在设置前会遍历页面所有的标签，所以性能会比较差，企业开发中一般不会使用
网友评论