zoukankan      html  css  js  c++  java
  • css3选择器归总

     同级元素通用选择器(同级):A~B,只要B在A的后面,A就可以匹配到B;例如:p~ul,选择前面有p元素的每个ul元素。
        临近选择器(同级):A+B,A和B必须是邻近的;例如:div+p,选择紧接在div元素之后的所有p元素。
        子选择器:A>B,A只能匹配自己的儿子,匹配不到A的孙子辈;例如:div>p,选择父元素为div元素的所有p元素。
        属性选择器:有四种,input是最常用这个选择器的标签。
                第一种:E[att^=”val”],属性att的值以”val”开头的元素。
                第二种:E[att$=”val”] ,属性att的值以”val”结尾的元素。
                第三种:E[att*=”val”] ,属性att的值包含”val”字符串的元素。
                第四种:E[att=”val”],属性att的值是”val“元素。
        伪类选择器
                与用户界面有关的伪类(:enabled,:disabled(常用),:checked,::selection):
                    E:enabled,匹配表单中激活的元素 表单中可操作的元素。同disabled。
                    E:disabled, 匹配表单中禁用的元素 disabled="disabled",input[type="text"]:disabled { background:#ddd;}。
                    E:checked, 匹配表单中被选中的radio(单选框)或checkbox(复选框)元素。同disabled。
                    ::selection, 匹配用户当前选中的元素, ::selection{background:#ddd;}。前面不加元素。
                 结构性伪类(:root ,E:nth-child(n) ,E:nth-last-child(n) ,E:last-child ),支持{:nth-child(2n),:nth-child(2n+1),:nth-child(3n),:nth-child(3n+2)这种数学公式}
                    :root 匹配文档的根元素,对于HTML文档,就是HTML元素。前面不加元素。
                    E:nth-child(n), 匹配其父元素的第n个子元素;例如:p:nth-child(2),选择属于其父元素的第二个子元素的每个p元素。
                    E:nth-last-child(n) ,匹配其父元素的倒数第n个子元素;例如:p:nth-last-child(2),选择属于其父元素的倒数第二个子元素的每个p元素。
                    E:last-child, 匹配父元素的最后一个子元素,等同于:nth-last-child(1);例如:p:last-child,选择属于其父元素最后一个子元素的每个p元素。
                    E:nth-of-type(n),与:nth-child()作用类似,但是仅匹配使用同种标签的元素。例如:p:nth-of-type(2),选择属于其父元素第二个子p元素的每个p元素。
                    E:nth-last-of-type(n), 与:nth-last-child() 作用类似,但是仅匹配使用同种标签的元素 。例如:p:nth-last-of-type(2),选择属于其父元素倒数第二个子p元素的每个p元素。
                    E:first-of-type, 匹配父元素下使用同种标签的第一个子元素,等同于:nth-of-type(1);例如:p:last-of-type,选择属于其父元素的首个p元素的每个p元素。
                    E:last-of-type, 匹配父元素下使用同种标签的最后一个子元素,等同于:nth-last-of-type(1);例如:p:last-of-type,选择属于其父元素的最后一个p元素的每个p元素。
                        E:only-child ,匹配父级元素只有一个子元素的元素;例如:p:only-child,选择属于其父元素的唯一一个元素的每个p元素。
                        E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素,等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1) 。例如:p:only-of-type,选择属于其父元素唯一的p元素的每个p元素。
                        E:empty 匹配一个不包含任何子元素的元素,注意,文本节点也被看作子元素.,空白节点也被看做子节点。例如:p:empty ,选择没有子元素的每个p元素(包括文本节点)。
                 反选伪类选择器:(E:not(s) )
                      :not(s) ,匹配不符合当前选择器的任何元素 :not(:nth-child(1))。前面不加元素;例如:     :not(p)  ,选择非p元素的每个元素。
                    :focus 选择器:
                        E:focus,选取获得焦点的元素。例如:input:focus ,选择选择获得焦点的input元素。

     

  • 相关阅读:
    在IIS7中应用Application Request Routing配置反向代理
    sqlite数据类型(时间 日期 ) timestamp 使用
    Windows环境下搭建Redis集群(Redis-x64-3.2.100)
    Vertx上传 官网Demo Java版
    Vert.x HTTP 服务器与客户端
    vertx-mysql-client/java/
    vertx-jersey
    Vertx和Jersey集成使用
    jersey常用注解解释 JAX-RS常用注解:
    Statement及PreparedStatement执行多个sql
  • 原文地址:https://www.cnblogs.com/jinxinblog/p/3551555.html
Copyright © 2011-2022 走看看