HTML学习之路-第八天

2017-09-13  本文已影响0人  白尾巴的猫

1.CSS-并集选择器

(1)作用:给所有选择器选中的标签设置属性

(2)格式:

                     选择器1,选择器2{

                                         属性:值;

                     }

(3)注意点:选择器之间用“,”来连接,并集选择器是为了简化代码

2.CSS-兄弟选择器

(1)相邻兄弟选择器:给指定选择器后面紧跟的那个选择器选中的标签设置属性

          格式:

                       选择器1+选择器2{

                                属性:值;

                       }

           注意点:必须通过“+”连接,不能选中被隔开的选择器

(2)通用兄弟选择器:给指定选择器后面的所有选择器选中的标签设置属性

           格式:

                       选择器1~选择器2{

                              属性:值;

                         }

3.CSS-序选择器

(1)格式:

                     标签:序选择器{

                                属性:值;

                     }

(2)同级别的::first-child(同级别的第一个标签,不区别类型)

                              :last-child(同级别的最后一个标签,不区别类型)

                              :nth-child(n)(同级别中第n个标签,不区别类型)

                              :nth-last-child(n)(同级别中倒数第n个标签,不区别类型)

                              :only-child(选中父元素中唯一的标签)

                             :nth-child(odd)(同级别中所有奇数标签)

                             :nth-child(even)(同级别中所有偶数标签)

(3)同类型的::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)(同类型中所有偶数标签)

(4)其他详细的序选择器可参考此链接

4.CSS-属性选择器

(1)作用:根据指定的属性名称找到对应的标签,然后设置属性

(2)格式:

          标签[attribute]{

                                属性:值;

                   }

                  作用:根据指定的属性名称找到对应的标签,然后设置属性

          标签[attribute=value]{

                                 属性:值;

                   }

                  作用:根据指定的属性名称及其值等于value,找到对应的标签,然后设置属性

          属性的取值以某某开头的:

                   标签[attribute|=value]{

                                  属性:值;

                    }

                   标签[attribute^=value]{

                                  属性:值;

                     }

          属性的取值以某某结尾的:

                   标签[attribute$=value]{

                                   属性:值;

                    }

          属性的取值是否包含某个特定的值:

                   标签[attribute~=value]{

                                   属性:值;

                    }

                   标签[attribute*=value]{

                                    属性:值;

                    }

5.CSS-通配符选择器

(1)作用:给当前界面所有的标签设置属性

(2)格式:

                      *{

                         属性:值;

                       }

(3)注意点:当前界面标签很多时,性能会比较差

上一篇下一篇

猜你喜欢

热点阅读