css选择器汇总文档格式.docx

资源描述

css选择器汇总文档格式.docx

《css选择器汇总文档格式.docx》由会员分享，可在线阅读，更多相关《css选择器汇总文档格式.docx（19页珍藏版）》请在冰豆网上搜索。

css选择器汇总文档格式.docx

}

position:

relative;

color:

#f00;

font-size:

14px;

font-size:

0\9;

*font-size:

after{position:

absolute;

left:

background:

#fff;

#000;

content:

如果你的能看到这段文字，说明你的浏览器只支持

after"

如果你的能看到这段文字，说明你的浏览器支持E:

after和E:

;

/style>

/head>

body>

vp>

Sorry,你的浏览器不支持E:

after和E:

/p>

/body>

v/html>

2伪选择器beforev!

DOCTYPEhtml>

vhtmllang="

vhead>

vmetacharset="

vtitle>

beforev/title>

设置在对象前（依据对象树的逻辑结构）发生的内容。

CSS3各伪对象选择符（Pseudo-ElementSelectors）前面的单个冒号（:

before可转化为E:

before

before/E:

before{sRules}

vstyle>

body{background-color:

}p{

*font-size:

before{position:

如果你的能看到这段文字，说明你的浏览器只支持E:

before"

before和E:

Sorry,你的浏览器不支持E:

before<

/html>

3first-letter

htmllang="

head>

metacharset="

first-letter<

语法：

first-letter/E:

first-letter{sRules}

说明：

设置对象内的第一个字符的样式。

此伪对象仅作用于块对象。

内联对象要使用该伪对象，必须先将其设置为块级对象。

该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

IE6在使用该选择符时有个显式的BUG选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

同时还存在该BUG的选择

符包括：

first-line

CSS3各伪对象选择符（Pseudo七lementSelectors）前面

的单个冒号（:

）用以区别伪类选择符（Pseudo-ClassesSelectors），但以前的写法仍然有效。

first-letter可转化为E:

first-letter

兼容性：

IE6及更早浏览器下，E:

first-letter选择符与包含规则的花括号之间不能紧挨着，需留有空格或换行。

IE5.5及IE6本质上并不支持E:

first-letter的写法，而

是忽略掉了E:

first-letter中的一个冒号，仍以E:

first-letter来解

释，所以它们也变相的支持了E:

body{background-color:

h1{font-size:

16px;

width:

200px;

padding:

5px10px;

border:

1pxsolid#ddd;

font:

14px/1.5simsun,serif,sans-serif}

first-letter{float:

left;

40px;

font-weight:

bold;

line-height:

/head>

h1>

杂志常用的首字下沉效果<

/hl>

vp>

今天，阳光明媚，晴空万里，非常适合户外活动，如踏青、远

/body>

4first-line

first-line<

first-line/E:

first-line{sRules}

设置对象内的第一行的样式。

此伪对象仅作用于块对象。

first-line可转化为E:

1、IE6及更早浏览器下，E:

first-line选择符与包含规则

的花括号之间不能紧挨着，需留有空格或换行。

2、IE5.5及IE6本质上并不支持E:

first-line的写法，

而是忽略掉了E:

first-line中的一个冒号，仍以E:

first-line来解释,

所以它们也变相的支持了E:

first-line。

body{

h1{

200px;

padding:

14px/1.5simsun,serif,sans-serif;

first-line{

color:

#090;

第一行文字的颜色与其它不同<

5伪对象选择器

Pseudo-ElementSelectorsindex<

--描述：

伪对象选择器。

--[iflteIE8]>

scriptsrc="

../../js/html5.js"

/script>

[endif]-->

styletype="

text/css"

headerid="

hd"

h1class="

tit"

CSSPseudo-ElementSelectors<

/h1>

ulclass="

info"

li>

伪对象选择符<

/li>

/ul>

/header>

sectionid="

bd"

pseudo-element-listing"

class="

gmodulegattr"

h2class="

伪对象选择符Pseudo-Element

Selectors<

/h2>

divclass="

cont"

linkcss3"

/td>

tableclass="

gdataform"

thead>

tr>

th>

br/>

选择符<

/th>

CSSVersion<

版本<

Description<

简介<

/tr>

/thead>

tbody>

td>

ahref="

first-letter.htm"

/a>

CSS1/CSS3<

first-line.htm"

before.htm"

CSS2/CSS3<

设置在对象前（依据对象树的逻辑结

after.htm"

设置在对象后（依据对象树的逻辑结

构）发生的内容。

用来和content属性一起使用<

selection.htm"

selection<

CSS3<

设置对象被选择时的颜色。

/tbody>

/table>

/div>

related"

pclass="

glight"

*CSS3将伪对象选择符

（Pseudo-ElementSelectors）前面的单个冒号（:

）用以区别伪类选择符（Pseudo-ClassesSelectors），但以前的写法仍然有效。

strongclass="

这种颜色

v/strong>

的链接表示是CSS3选择符或原选择符被CSS3修改并赋予了新的特性<

v/div>

v/section>

v/body>

v/html>

6对象选择时样式v!

vhtml>

vhead>

selectionv/title>

设置对象被选择时的样式。

selection{sRules}

写法：

内核类型写法（E:

selection）

Webkit（Chrome/Safari）E:

selection

Gecko（Firefox）E:

-moz-selection

Presto（Opera）E:

Trident（IE）E:

-moz-selection{

background:

selection{

h1>

选中下面的文字，看看它的颜色v/h1>

你选中这段文字后，看看它们的文本颜色和背景色，就能明

白:

selection的作用。

7选定所有元素

通配选择符（*）<

选定所有对象。

*{sRules}

，而是将它忽略

IE6及更早浏览器并不支持通配选择符（*）了，所以也变相的能看到效果。

标题<

8myclass

class选择符（E.myclass）<

以class属性包含myclass的E对象作为选择符

E.myclass{sRules}

background-color

deepskyblue;

20px;

13px;

.title{font-size

p.content{font-size

title"

标题<

9文档语言对象选择符

类型选择符（E）<

E{sRules}

以文档语言对象类型作为选择符。

body{background-color:

20px;

p{font-size:

13px;

10id选择符

id选择符（E#myid）<

以唯一标识符id属性等于myid的E对象作为选择符

E#myid{sRules}

#title{font-size:

p#content{font-size:

body>

h1id="

11元素选择器<

htmllang=