CSS选择器汇总(w3school收集)（2）

猫性男孩

7.属性选择器

01	/** 选择含有title属性的元素 **/

[backcolor=rgb(248, 248, 248) !important]

02	.box[title] { ... }

03

[backcolor=rgb(248, 248, 248) !important]

04	/** 选择title="this is a box"的元素 **/

05	.box[title="this is a box"] { ... }

[backcolor=rgb(248, 248, 248) !important]

06

07	/** 选择title="this is a box"的元素 **/

[backcolor=rgb(248, 248, 248) !important]

08	.box[title="this is a box"] { ... }

09

[backcolor=rgb(248, 248, 248) !important]

10	/** 选择title值以"this"开头的元素 **/

11	.box[title^="this"] { ... }

[backcolor=rgb(248, 248, 248) !important]

12

13	/** 选择title以"box"结尾的元素 **/

[backcolor=rgb(248, 248, 248) !important]

14	.box[title$="box"] { ... }

15

[backcolor=rgb(248, 248, 248) !important]

16	/** 多个属性筛选 **/

17	.box[title="this is a box"][alt] { ... }

8.伪类

伪类主要有：
:hover    :visited    :link    :active    主要应用于超链接，某些浏览器不支持该伪类应用于非超链接元素
:first-child   用来选择满足前面选择器元素中的第一个元素，而不是子元素

所有主流浏览器都支持上面的伪类，另外:first-child伪类在ie中工作时，html必须加<!DOCTYPE>

1	a:link {color: #FF0000}     /* 未访问的链接 */

[backcolor=rgb(248, 248, 248) !important]

2	a:visited {color: #00FF00}  /* 已访问的链接 */

3	a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */

[backcolor=rgb(248, 248, 248) !important]

4	a:active {color: #0000FF}   /* 选定的链接 */

5

[backcolor=rgb(248, 248, 248) !important]

6	p:first-child {font-weight: bold;}

7	li:first-child {text-transform:uppercase;}

9.伪元素

伪元素主要有：
:first-line       用于向文本的首行设置特殊样式，只能用于块级元素
:first-letter    用于向文本的首行的首字符设置特殊样式，只能用于块级元素
:before         用于在元素的内容前面插入新内容，例如在超链接前面显示一张小图片，通常与content属性搭配使用
:after           用于在元素的内容**入新内容，例如在超链接后面显示一张小图片，通常与content属性搭配使用

01	p:first-letter { color:#ff0000; font-size:xx-large; }

[backcolor=rgb(248, 248, 248) !important]

02

03	p:first-line { color:#0000ff; font-variant:small-caps; }

[backcolor=rgb(248, 248, 248) !important]

04

05	h1:before {

[backcolor=rgb(248, 248, 248) !important]

06	content:url(/i/w3school_logo_white.gif);

07	vertical-align:middle;

[backcolor=rgb(248, 248, 248) !important]

08

}

09

[backcolor=rgb(248, 248, 248) !important]

10

h1:after{

11	content:url(/i/w3school_logo_white.gif);

[backcolor=rgb(248, 248, 248) !important]

12	vertical-align:top;

13

}

最后是关于群组和过滤的使用：

群组：多个选择器用,号分开，则可以对多个选择器应用相同的样式设置，如html,body,div,p { ... }

过滤：多个选择器一起使用，之间不加空格和其他符合，则可以选择同时满足列出选择器的元素，跟后代选择器不一样，后代选择器要加空格，并且是在前面选择器选择的元素的后代元素中再选择。通常是元素选择器和类选择器或id选择器搭配使用。

1	html,body,div,p { ... }

[backcolor=rgb(248, 248, 248) !important]

2	.box,#wrapper,div { ... }

3

[backcolor=rgb(248, 248, 248) !important]

4	div.content {... }

5	div#wrapper {... }

小乌龟

这是asp.net里的课程吧。