美文网首页
CSS选择器

CSS选择器

作者: 梨啊梨 | 来源:发表于2017-12-19 22:56 被阅读0次

    属性选择器

    E【foo】:选择匹配E元素,且E元素定义了foo属性

    E【foo=“bar”】:选择匹配E元素,且E元素定义了foo属性,而且属性的值是bar

    E【foo^=“bar”】:选择匹配E的元素,且该元素定义了foo属性,foo属性值包括前缀为"bar"的字符串

    E【foo$=“bar”】:选择匹配E的元素,且该元素定义了foo属性,foo属性值包括后缀为"bar"的字符串

    E【foo*=“bar”】:选择匹配E的元素,且该元素定义了foo属性,foo属性值包括bar的字符串

    E选择符可以省略,表示匹配任意类型的元素


    结构伪类选择器

    E:root:匹配E所在文档的根元素

    E:nth-child(n):选择所有在其父元素中第n个位置的匹配E的子元素

    E:nth-last-child(n):选择所有在其父元素中倒数的第n个位置的匹配E的子元素

    E:nth-of-type(n):选择所有在其父元素中同类型的第n个位置的匹配E的子元素

    E:nth-last-of-type(n):选择所有在其父元素中同类型倒数的第n个位置的匹配E的子元素

    E:last-child:选择位于其父元素中最后一个位置,且匹配E的子元素

    E:first-of-type:选择在其父元素中匹配E的第一个同类型的子元素

    E:last-of-type:选择在其父元素中匹配E的最后一个同类型的子元素

    E:only-of-type:选择其父元素只包含一个同类型子元素,且该子元素匹配E

    E:empty:选择匹配E的元素,且该元素不包含子节点


    UI伪类选择器

    指定的样式只有当元素处于某种状态下时,才起作用。在默认状态下不起作用。

    CSS3共有11种:E:hover、E:active、E:focus、E:enabled、E:disabled、E:read-only、E:read-write、

    E:checked、E:default、E:indeterminate和E:selection

    E:enabled:选择匹配E的所有可用的UI元素,一般指包含在form内的表单元素。按钮不包括

    E:disabled:选择匹配E的所有不可用的UI元素,(按钮)不包括文本框

    E:checked:选择匹配E的所有可用的UI元素,(单选按钮)不包括复选框


    其他选择器

    E~F:通用兄弟元素选择器类型。选择匹配F的所有元素,且匹配元素低于匹配E的元素后面

    E:target:目标伪类选择器类型。选择匹配E的所有元素,且匹配元素被相关URL指向,只有当存在URL指向该匹配元素时,样式效果才有效

    E:not(s):否定伪类选择器类型。选择匹配E的所有元素,且过滤匹配s选择符的任意元素,s时一个简单结果的选择器,不能够使用复合选择器,相当于二次过滤,适合精确选择元素

    相关文章

      网友评论

          本文标题:CSS选择器

          本文链接:https://www.haomeiwen.com/subject/vgoiwxtx.html