选择器的学习-2

继续选择器学习

上次说到了子元素选择器,今天接着说选择器,下面说一下交集选择器
问题来了,那么什么是交集选择器呢?
交集选择器就是给所有选中的标签中,相交的那部分标签设置属性
格式:

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

注意点:
1:选择器和选择器之间没有任何的连接符号
2:选择器可以使用标签名称/id名称/class名称

有了交集选择器,那么就会有并集选择器
并集选择器就是给所有选择器选中的标签设置属性
格式:

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

注意:并集选择器必须使用逗号连接
兄弟选择器
1:相邻兄弟选择器
给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式:

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

**注意:**必须通过+连接
2:通用兄弟选择器
格式:

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

**注意:**通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有的标签,无论有没有被隔开都可以选中。
通用兄弟选择器必须用~连接。

序选择器:CSS中新增的选择器最具代表性的就是序选择器
1:同级别的第几个
:first-child 选中同级别中的第一个标签
last-child 选中同级别中的最后一个标签
nth-child(n)选中同级别中的第n个标签
nth-child(odd)选中同级别中的奇数个标签
nth-child(even)选中同级别中的偶数个标签
nth-last-child(n)选中同级别中的倒数第n个标签
only-child 选中父元素中唯一的标签
注意:不区分类型
2:同类型的第几个
first-of-type: 选中同级别中同类型的第一个标签
last-of-type: 选中同级别中同类型的最后一个标签
nth-of-type(n):选中同级别中同类型的第n个标签
nth-of-type(odd):选中同级别中同类型的奇数位标签
nth-of-type(even):选中同级别中同类型的偶数位标签
nth-last-of-type(n):选中同级别中同类型的倒数第n个标签

用户自定义:nth-child(xn+y),x和y是用户自定义的,n是一个计数器,从0开始递增。

属性选择器:,设置属性。
格式:
attribute就是属性
[attribute]
[attribute=value]
找到有指定属性,并且属性的取值等于value的标签,然后设置属性。

1:属性的取值是以什么开头的
[attribute|=value]
[attribute^=value] CSS3推出

2:属性的取值是以什么结尾的
[attribute$=value] CSS3推出

3:属性的取值是否包含某个特定的值的
[attribute~=value]
[attribute*=value] CSS3推出

重点掌握CSS3推出的

通配符选择器:给当前界面上所有的标签设置属性
格式:

.*{
	属性:;
}

注意点:由于通配符选择器在设置属性之前会遍历所有的标签,如果当前界面有很多标签的话,性能就会比较差,所以在企业一般不会使用通配符选择器。

关于选择器就说到这里了。

发布了23 篇原创文章 · 获赞 12 · 访问量 1569

猜你喜欢

转载自blog.csdn.net/weixin_45607985/article/details/103673976