Home > Web Front-end > HTML Tutorial > CSS3选择器_html/css_WEB-ITnose

CSS3选择器_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:18:37
Original
1149 people have browsed it

基本选择器

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

*{    marigin: 0;    padding: 0; }
Copy after login

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;}/*鼠标点中激活链接那一下前景色为蓝色*/
Copy after login

注意先后顺序:爱恨原则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;}
Copy after login

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;}
Copy after login

4、伪元素

两个“::”和一个“:”css3中主要用来区分伪类和伪元素,到目前来说,这两种方式都是被接受的,也就是说不管使用哪种写法所起的作用都是一样的,只是一个书写格式不同而以。

::first-line选择元素的第一行,比如说改变每个段落的第一行文本的样式;

::first-letter选择文本块的第一个字母,除非在同一行里面包含一些其它元素,不过这个主要运用于段落排版上多,比如说首字下沉;

::before和::after这两个主要用来给元素的前面或后面插入内容,这两个常用"content"配合使用,见过最多的就是清除浮动;

::selection 用来改变浏览网页选中文的默认效果

/*Webkit,Opera9.5+,Ie9+*/   ::selection {	background: 颜色值;	color:颜色值;   }   /*Mozilla Firefox*/   ::-moz-selection {	background: 颜色值;	color:颜色值;    }
Copy after login

“::selection”只能设置两个属性,一个就是background,另一个就是color属性,设置其他属性是没有任何效果的。

参考:http://www.w3cplus.com/css3/basic-selectors

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template