CSS3选择器_html/css_WEB-ITnose
1、通配符选择器(*)—所有浏览器支持
*{ marigin: 0; padding: 0; }
2、元素选择器(E) —所有浏览器支持
3、类选择器(.className) —所有浏览器支持
4、id选择器(#ID)—所有浏览器支持
5、后代选择器(E F)—所有浏览器支持
选择了E元素的所有后代F元素,中间是一个空格;
6、子元素选择器(E>F) —IE6不支持
选择了E元素下的所有子元素F
7、相邻兄弟元素选择器(E + F) —IE6不支持
EF两元素具有一个相同的父元素,而且F元素在E元素后面,而且相邻;
8、通用兄弟选择器(E 〜 F) —IE6不支持
选择某元素后面的所有兄弟元素
9、群组选择器(selector1,selector2,...,selectorN)—所有浏览器支持
每个选择器之间使用逗号“,”隔开
属性选择器 IE6不支持
E[attr]:只使用属性名,但没有确定任何属性值;
E[attr="value"]:指定属性名,并指定了该属性的属性值;
E[attr~="value"]:指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写;
E[attr="value"]与E[attr~="value"]的区别:属性选择器中有波浪(〜)时属性值有value时就相匹配,没有波浪(〜)时属性值要完全是value时才匹配。
E[attr^="value"]:指定了属性名,并且有属性值,属性值是以value开头的;
E[attr$="value"]:指定了属性名,并且有属性值,而且属性值是以value结束的;
E[attr*="value"]:指定了属性名,并且有属性值,而且属值中包含了value;
E[attr|="value"]:指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn);
伪类选择器
1、动态伪类 对于:hover在IE6下只有a元素支持,:active只有IE6-7不支持,:focus在IE6-7下不被支持。
.demo a:link {color:gray;}/*链接没有被访问时前景色为灰色*/.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/
注意先后顺序:爱恨原则LoVe/HAte,也就是Link--visited--hover--active;
还有一个 :focus 用于元素成为焦点,这个经常用在表单元素上。
2、UI元素状态伪类 IE6-8不支持
":enabled",":disabled",":checked" 主要是针对于HTML中的Form元素操作
input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}
3、CSS3的:nth选择器
:first-child选择某个元素的第一个子元素;
:last-child选择某个元素的最后一个子元素;
:nth-child(n)选择某个元素的一个或多个特定的子元素; IE6-8和FF3-浏览器不支持":nth-child"选择器。
括号里的n可以是整数,表达式,关键词;
整数:从1开始;如 :nth-child(3),选择某元素下的第三个子元素;
表达式:如2n+1,n是从0开始; 这里的n只能是n,不能改成其他字母代替;
关键词:odd,even;
:nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
:nth-of-type()选择指定的元素;
:nth-of-type类似于:nth-child;唯一不同的是这种指定了元素的类型而以;
:nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
:first-of-type选择一个上级元素下的第一个同类子元素;
:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。
:last-of-type选择一个上级元素的最后一个同类子元素;
:only-child选择的元素是它的父元素的唯一一个了元素;
":only-child"表示的是一个元素是它的父元素的唯一一个子元素
:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
:empty选择的元素里面没有任何内容。
:empty是用来选择没有任何内容的元素,这里没有内容指的是一点内容都没有,哪怕是一个空格;
3、否定选择器(:not) IE6-8浏览器不支持
input:not([type="submit"]) {border: 1px solid red;}
4、伪元素
两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。
::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式;
::first-letter选择文本块的第一个字母,除非在同一行里面包含一些其它元素,不过这个主要运用于段落排版上多,比如说首字下沉;
::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动;
::selection 用来改变浏览网页选中文的默认效果;
/*Webkit,Opera9.5+,Ie9+*/ ::selection { background: 颜色值; color:颜色值; } /*Mozilla Firefox*/ ::-moz-selection { background: 颜色值; color:颜色值; }
“::selection”只能设置两个属性,一个就是background,另一个就是color属性,设置其他属性是没有任何效果的。
参考:http://www.w3cplus.com/css3/basic-selectors