HTML学习之路-第八天

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)注意点:当前界面标签很多时,性能会比较差

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,958评论 19 139
  • CSS选择器 标签选择器 什么是标签选择器? 作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然...
    Jackson_yee_阅读 515评论 0 0
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,170评论 6 13
  • 周末两天都没去写简书,现在又是在回去的车上,可以有时间空间写了。 今天给外婆打了个电话,给爷爷打的电话没有通。为什...
    闻舒阅读 113评论 0 2
  • 谈及英汉翻译,里面涉及到了不仅是语言知识,还有基本的翻译原则和其背后的文化背景。虽然从小到大,我学了这么多年的英语...
    木清悠阅读 2,640评论 3 5