收藏

下载资源 加入VIP,免费下载

第1页 / 共23页

第2页 / 共23页

第3页 / 共23页

第4页 / 共23页

第5页 / 共23页

此例只有.a会被命中，因为它是.demo的子元素；

1.3相邻选择符（E+F）

选择紧贴在E元素之后F元素。

与兄弟选择符不同的是，相邻选择符只会命中符合条件的相邻的兄弟元素。

E~FVS.E+F：

p1

p2

这是一个标题

p3

这是一个标题

p4

p5

此例，如果使用p+p{color:

#f00;}，那么p2,p5将会变成红色；如果使用p~p{color:

#f00;}，那么p2,p3,p4,p5将会变成红色；

1.4兄弟选择符（E~F）

选择E元素后面的所有兄弟元素F。

与相邻选择符不同的是，兄弟选择符会命中所有符合条件的兄弟元素，而不强制是紧邻的元素。

E~FVS.E+F：

p1

p2

这是一个标题

p3

这是一个标题

p4

p5

此例，如果使用p+p{color:

#f00;}，那么p2,p5将会变成红色；如果使用p~p{color:

#f00;}，那么p2,p3,p4,p5将会变成红色；

二、属性选择符

2.1E[att]

选择具有att属性的E元素。

例如：

此例，将会命中第一张图片，因为匹配到了alt属性

2.2E[att="val"]

选择具有att属性且属性值等于val的E元素。

例如：

此例，将会命中第一张input，因为匹配到了alt属性，并且属性值为text

2.3E[att~="val"]

选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素（包含只有一个值且该值等于val的情况）。

例如：

1

2

3

此例，将会命中1,3两个div，因为匹配到了class属性，且属性值中有一个值为a

2.4E[att^="val"]

选择具有att属性且属性值为以val开头的字符串的E元素。

例如：

1

2

3

此例，将会命中1,2两个div，因为匹配到了class属性，且属性值以a开头

2.5E[att$="val"]

选择具有att属性且属性值为以val结尾的字符串的E元素。

例如：

1

2

3

此例，将会命中1,3两个div，因为匹配到了class属性，且属性值以c结尾

2.6E[att*="val"]

选择具有att属性且属性值为包含val的字符串的E元素。

例如：

1

2

3

此例，将会命中所有div，因为匹配到了class属性，且属性值中都包含了b

2.7E[att|="val"]

选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择。

例如：

1

2

3

此例，将会命中第一个div，因为匹配到了class属性，且属性值以紧跟着"-"的a开头

三、伪类选择符

3.1E:

link

设置超链接a在未被访问前的样式。

∙如果需要给超链接定义：

访问前，鼠标悬停，当前被点击，已访问这4种伪类效果，而又没有按照一致的书写顺序，不同的浏览器可能会有不同的表现

∙超链接的4种状态，需要有特定的书写顺序才能生效。

超链接状态顺序：

a:

link{}

a:

visited{}

a:

hover{}

a:

active{}

注意，a:

hover必须位于a:

link和a:

visited之后，a:

active必须位于a:

hover之后

可靠的顺序是：

l（link）ov（visited）eh（hover）a（active）te,即用喜欢（love）和讨厌（hate）两个词来概括

3.2E:

focus

设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。

∙webkit内核浏览器会默认给:

focus状态的元素加上outline的样式。

例如：

input:

focus{background:

#f6f6f6;color:

#f60;border:

1pxsolid#f60;outline:

none;}

3.3E:

lang（fr）

匹配使用特殊语言的E元素。

例如：

大段测试文字

english

3.4E:

not（s）

匹配不含有s选择符的元素E。

∙有了这个选择符，那么你将可以很好的处理类似这样的场景：

假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线

示例：

.demoli:

not（:

last-child）{border-bottom:

1pxsolid#ddd;}

上述代码的意思是：

给该列表中除最后一项外的所有列表项加一条底边线

3.5E:

root

匹配E元素在文档的根元素。

在HTML中，根元素永远是HTML

∙根据这个特性，可以做IE8的Hack

示例：

.test{

color:

black;

color:

yellow\0;

*color:

blue;

_color:

red;

}

html:

root.test{color:

purple\0;}

上述代码：

非IE文本将为black，IE9及以上为purple，IE8为yellow，IE7为blue，IE6为red

3.6E:

first-child

匹配父元素的第一个子元素E。

∙要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

∙这里可能存在误解：

示例代码：

• 列表项一
• 列表项二
• 列表项三
• 列表项四

在上述代码中，如果我们要设置第一个li的样式，那么代码应该写成li:

first-child{sRules}，而不是ul:

first-child{sRules}。

∙来看这样一段代码：

示例代码：

p:

first-child{color:

#f00;}

这段代码你能看到p元素被命中变成了红色

∙假设将代码简单地修改一下：

示例代码：

p:

first-child{color:

#f00;}

只是在p前面加了一个h2标签，你会发现选择器失效了，没有命中p，why?

∙E:

first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。

与之类似的伪类还有E:

last-child，只不过情况正好相反，需要它是最后一个子元素。

3.7E:

last-child

匹配父元素的最后一个子元素E。

∙要使该属性生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素

∙E:

last-child选择符，E必须是它的兄弟元素中的最后一个元素，换言之，E必须是父元素的最后一个子元素。

与之类似的伪类还有E:

first-child，只不过情况正好相反，需要它是第一个子元素。

∙通过具体的例子来进行理解：

有效的代码：

p:

last-child{color:

#f00;}

无效的代码：

p