css31属性选择器.docx

《css31属性选择器.docx》由会员分享，可在线阅读，更多相关《css31属性选择器.docx（18页珍藏版）》请在冰豆网上搜索。

css31属性选择器

一．属性选择器

1E[attr]只使用属性名，但没有确定任何属性值

例如：

leo

杜鹏

子鼠

小美

2E[attr="value"]指定属性名，并指定了该属性的属性值

leo

杜鹏

子鼠

小美

3E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写

leo

杜鹏

子鼠

小美

4E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）

leo

杜鹏

子鼠

小美

无名氏

5E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的

leo

杜鹏

子鼠

小美

6E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的

leo

杜鹏

子鼠

小美

7E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value

leo

杜鹏

子鼠

小美

二．结构性伪类

伪类选择器是CSS中已经定义好的选择器，不能随便起名。

利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内Class属性和ID属性的定义，使得文档更加简洁。

1E:

nth-child（n）表示E父元素中的第n个字节点

p:

nth-child（odd）{background:

red}/*匹配奇数行*/

p:

nth-child（even）{background:

red}/*匹配偶数行*/

p:

nth-child（2n）{background:

red}//匹配偶数行

p:

nth-child（2n+1）{background:

red}//匹配奇数行

p1

h1

p2

h2

p3

h3

p4

p5

2E:

nth-last-child（n）表示E父元素中的第n个字节点，从后向前计算

与1是计算顺序相反的选择器

3E:

nth-of-type（n）表示E父元素中的第n个字节点，且类型为E

p1

h1

p2

h2

p3

h3

p4

p5

4E:

nth-last-of-type（n）表示E父元素中的第n个字节点，且类型为E,从后向前计算

5E:

first-child表示E元素中的第一个子节点

6E:

last-child表示E元素中的最后一个子节点

7E:

first-of-type表示E父元素中的第一个子节点且节点类型是E的

8E:

last-of-type表示E父元素中的最后一个子节点且节点类型是E的

:

first-child==:

nth-child

（1）

:

last-child==:

nth-last-child

（1）

:

first-of-type==nth-of-type

（1）

:

last-of-type==nth-last-of-type

（1）

9E:

empty表示E元素中没有子节点。

注意：

子节点包含文本节点

h1

p2

h2

p3

h3

p5

10     E:

only-child表示E元素中只有一个子节点。

注意：

子节点不包含文本节点关注子节点

       如：

匹配

div3