阅读背景:

H5+CSS3选择器_一个对前端瑟瑟发抖的小白的博客_h5选择器

来源:互联网 

HTML5

CSS3选择器

  css选择符               


                    属性选择器
                       
                                1   选择符[属性]{  }                    当一个元素有当前属性才能匹配
                                2   选择符[属性="属性值"]{}              属性和属性值完全相同时才能匹配
                                3   选择符[属性~="属性值"]{}             属性值为一个词列表  属性值为任意一个就能进行匹配
                                4   选择符[属性^="属性值"]{}             属性值为字符 从第一个字符开始  比如  alt="boy"  b bo 就能进行匹配
                                5   选择符[属性&="属性值"]{}             属性值为字符 从结尾匹配  比如  alt="boy"  y oy 就能进行匹配
                                6   选择符[属性*="属性值"]{}             属性值包含的任一字符都能进行匹配
                                7   选择符[属性|="属性值"]{}             仅有一个属性值  或 第一个属性值为 属性值- 才能进行匹配


               
                    伪类选择器

                      结构伪类选择器     

                                1   选择符:first-child       相同标签的结构会有一个虚拟的排列顺序  相同同级元素的第一个
                                2   选择符:last-child        相同标签的结构会有一个虚拟的排列顺序  相同同级元素的最后一个
                                3   选择符:nth-child(n)      第n个   也可以是even odd  2n  2n + 1
                                4   选择符:nth-last-child(n) 倒数第几个  倒序
                                5   选择符:only-child        仅有一个


                                1   选择符:first-of-type     不同标签在同级显示  定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
                                2   选择符:last-of-type     不同标签在同级显示  定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
                                3   选择符:nth-of-type(n)     不同标签在同级显示  定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
                                4   选择符:nth-last-of-type(n)     不同标签在同级显示  定义哪一个标签会把其他同级标签进行隐藏 在排列顺序
                                5   选择符:only-of-type     不同标签在同级显示  定义哪一个标签会把其他同级标签进行隐藏 在排列顺序


                                :root  定义根元素
                                :empty  定义空元素

                      目标伪类选择器

                                选择符:target   2d转换   匹配的元素被URL的相关指向

                      UI元素状态伪类
                            
                          表单

                                1  :enabled    定义可用元素的
                                2  :disabled   定义禁止元素的
                                3  :checked    定义默认选定的

                                4   ::selection  定义文本选中的样式  不能设置宽高 可用改变字体颜色 和背景 

                      动态伪类选择器

                                :link     未点击时的样式
                                :visited  点击过的样式
                                :hover    鼠标滑过的样式
                                :active   鼠标点击时的样式
                                :focus    聚焦时的样式


                      层级选择器

                                父子元素选择器       父元素>子元素 {}
                                兄弟选择器          子元素+子元素{}   相邻元素后面那个元素的样式
                                通用选择器          子元素~子元素     相邻元素后面那个元素的所有相同元素的样式
  css选择符           



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: