• CSS选择器介绍


    一、元素选择器

    E{...}

    二、属性选择器

    E[attr]{...}:指定该CSS对具有attr的元素起作用;

    E[attr=value]{...}::指定该CSS对具有attr的值为value的元素起作用;

    E[attr~=value]{...}:指定该CSS对具有attr属性,且属性值以逗号分隔,属性值中有value的元素起作用;

    E[attr|=value]{...}:指定该CSS对具有attr属性,且属性值以连字符分割,第一个属性值为value的元素起作用;

    E[attr^="value"]{...}:指定该CSS对具有attr属性,且属性值是以value开头的字符串的元素起作用;

    E[attr$="value"]{...}:指定该CSS对具有attr属性,且属性值是以value结尾的字符串的元素起作用;

    E[attr*="value"]{...}:指定该CSS对具有attr属性,且属性值包含value的字符串的元素起作用。

    同时具有以上选择器是,优先级由上到下依次增高。

    三、ID选择器

    #ID{...}

    四、CLASS选择器

    .CLASS{...}

    五、包含选择器

    Selector1 Selector2{...}:指定该CSS对在选择器Selector1中满足Selector2的元素起作用。

    六、自选择器

    Selector1>Selector2{...}:指定该CSS对选择器Selector1的直接子元素(或子元素的子元素等)满足Selector2的元素起作用。

    七、兄弟选择器

    Selector1~Selector2{...}:指定该CSS对选择器Selector1的兄弟元素中满足Selector2的元素起作用。

    八、选择器组合

    Selector1,Selector2,Selector3,...{...}:指定该CSS对一系列满足选择器的元素起作用。

    九、伪元素选择器

    E:first-letter{...}:指定该CSS对E元素的第一个字符起作用;

    E:first-line{...}:指定该CSS对E元素的第一行起作用;

    E:before{...}:指定该CSS对E元素内容前添加相关内容;

    E:after{...}:指定该CSS对E元素内容后添加相关内容。

    后两个选择器需要结合与内容相关的属性使用。

    十、结构性 伪类选择器

    Selector:root{...}:对HTML文档的根元素起作用;

    Selector:first-child{...}:对满足选择器,且是父元素的第一个子元素起作用;

    Selector:last-child{...}:对满足选择器,且是父元素的最后一个子元素起作用;

    Selector:nth-child(n){...}:对满足选择器,且是父元素的第n个子元素起作用;

    Selector:nth-last-child(n){...}:对满足选择器,且是父元素的倒数第n个子元素起作用;

    Selector:only-child{...}:对满足选择器,且是父元素唯一的子元素起作用;

    Selector:first-of-type{...}:对满足选择器,且是同类兄弟元素中的第一个元素起作用;

    Selector:last-of-type{...}:对满足选择器,且是同类兄弟元素中的最后一个元素起作用;

    Selector:nth-of-type(n){...}:对满足选择器,且是同类兄弟元素中第n个元素起作用;

    Selector:nth-last-of-type{...}:对满足选择器,且是同类兄弟元素中倒数第n个元素起作用;

    Selector:only-of-type{...}:对满足选择器,且兄弟元素中唯一该类型的元素起作用;

    Selector:empty{...}:对满足选择器且内部没有任何子元素的元素起作用。

    十一、UI元素状体伪类选择器

    Selector:link:满足选择器且未被访问过的元素;

    Selector:visited:满足选择器且已被访问过的元素;

    Selector:active:满足选择器且处于被用户激活状态的元素,激活指在用户鼠标点击与释放之间的事件;

    Selector:hover:满足选择器且处于鼠标悬停状态的元素;

    Selector:focus:满足选择器且已得到焦点的元素;

    Selector:enabled:满足选择器且当前处于可用状态的元素;

    Selector:disabled:满足选择器且当前处于不可用状态的元素;

    Selector:checked:满足选择器且当前处于选中状态的元素;

    Selector:default:满足选择器且页面打开时默认处于选中状态的元素;

    Selector:read-only:满足选择器且处于只读状态的元素;

    Selector:read-write:满足选择器且处于读写状态的元素;

    Selector::selection:满足选择器的元素中被选中的内容(注意前面是两个冒号);

    Selector:target:满足选择器且是命名锚点目标的元素;

    Selector1:not(Selector2):满足选择器1且不满足选择器2的元素。

  • 相关阅读:
    Mysql技术内幕——InnoDB存储引擎
    Nginx 0.7.x + PHP 5.2.6(FastCGI)+ MySQL 5.1 在128M小内存VPS服务器上的配置优化
    Mysql5.5 InnoDB存储引擎配置和优化
    MySQL存储引擎总结
    MySQL存储引擎--MyISAM与InnoDB区别
    MySQL存储引擎
    Mysql的建表规范与注意事项
    安装好oracle11gR2之后在相应路径下却没有生成tnsnames.ora和listener.ora
    split切割.号的字符串
    配置文件c3p0-config.xml
  • 原文地址:https://www.cnblogs.com/yoran-yang/p/5308697.html
Copyright © 2020-2023  润新知