CSS选择器

2019-04-18  本文已影响0人  Wj_adff

标签选择器

作用:根据指定的标签名称,在界面中找到所有该名称标签然后设置属性 

格式:  标签名称{

                                  属性:值;

                    }

注意点:标签选择器选中的是所有该名称的标签

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]

通配符选择器

*

选中页面中所有的标签

注意点:由于通配符选择器要设置页面上所有标签的属性,在设置前会遍历页面所有的标签,所以性能会比较差,企业开发中一般不会使用

上一篇下一篇

猜你喜欢

热点阅读