首頁 > web前端 > html教學 > CSS3选择器_html/css_WEB-ITnose

CSS3选择器_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:18:37
原創
1170 人瀏覽過

基本选择器

1、通配符选择器(*)—所有浏览器支持

*{    marigin: 0;    padding: 0; }
登入後複製

2、元素选择器(E) —所有浏览器支持
3、类选择器(.className) —所有浏览器支持
4、id选择器(#ID)—所有浏览器支持
5、后代选择器(E F)—所有浏览器支持

选择了E元素的所有后代F元素,中间是一个空格;

6、子元素选择器(E>F) —IE6不支持

选择了E元素下的所有子元素
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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板