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元素。

 

css3选择器归总

上一篇:eclipse缺省的Server没有weblogic


下一篇:运行php程序时,浏览器跳出打开和保存提示框