伪类选择器.docx

上传人：b****1 文档编号：14091600 上传时间：2023-06-20 格式：DOCX 页数：24 大小：18.60KB

下载相关举报

第1页 / 共24页

第2页 / 共24页

第3页 / 共24页

第4页 / 共24页

第5页 / 共24页

第6页 / 共24页

第7页 / 共24页

第8页 / 共24页

第9页 / 共24页

第10页 / 共24页

第11页 / 共24页

第12页 / 共24页

第13页 / 共24页

第14页 / 共24页

第15页 / 共24页

第16页 / 共24页

第17页 / 共24页

第18页 / 共24页

第19页 / 共24页

第20页 / 共24页

亲，该文档总共24页，到这儿已超出免费预览范围，如果喜欢就下载吧！

下载资源

资源描述

伪类选择器.docx

《伪类选择器.docx》由会员分享，可在线阅读，更多相关《伪类选择器.docx（24页珍藏版）》请在冰点文库上搜索。

伪类选择器.docx

伪类选择器

1lang

DOCTYPEhtml>

语言伪类选择符E:lang（）

描述：

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

语法：

lang（）{sRules}

-->

大段测试文字

2lastchild

DOCTYPEhtml>

结构性伪类选择符E:last-child

描述：

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

要使该属性生效，E对象必须是某个对象的子元素。

语法：

last-child{sRules}

-->

注意是li:
last-child，而不是ul:
last-child

结构性伪类选择符E:
last-child

结构性伪类选择符E:
last-child

结构性伪类选择符E:
last-child

结构性伪类选择符E:
last-child

3lastoftype

DOCTYPEhtml>

结构性伪类选择符E:last-of-type

描述：

匹配同类型中的最后一个同级兄弟元素E。

语法：

last-of-type{sRules}

-->

我是一个div元素

我是一个p元素

4left

DOCTYPEhtml>

@page:left

描述：

设置页面容器位于装订线左边的所有页面使用的样式。

仅用于@page规则。

语法：

@page:

left{sRules}

-->

页面容器位于装订线左边的所有页面左外边距为300px

5link

DOCTYPEhtml>

链接伪类选择符E:link

描述：

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

语法：

link{sRules}

-->

"class="external">外部链接

">内部链接

"class="external">外部链接

">内部链接

6not

DOCTYPEhtml>

否定伪类选择符E:not（）

时间：

2016-07-17

描述：

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

语法：

not（）{sRules}

-->

否定伪类选择符E:

not（）

否定伪类选择符E:

not（）

否定伪类选择符E:

not（）

否定伪类选择符E:

not（）

7nthchild

DOCTYPEhtml>

结构性伪类选择符E:nth-child（n）

描述：

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

要使该属性生效，E对象必须是某个对象的子元素。

语法：

nth-child（n）{sRules}

-->

第二行要变成红色`li: nth-child （2）{color:`
`#f00;}`

结构性伪类选择符E:
nth-child（n）

结构性伪类选择符E:
nth-child（n）

结构性伪类选择符E:
nth-child（n）

8nthlastchild

DOCTYPEhtml>

结构性伪类选择符E:nth-last-child（n）

描述：

匹配父元素的倒数第n个子元素E。

要使该属性生效，E对象必须是某个对象的子元素。

语法：

nth-last-child（n）{sRules}

-->

最后一行要变成红色`li: nth-last-child （1）{color:`
`#f00;}`

结构性伪类选择符E:
nth-last-child（n）

结构性伪类选择符E:
nth-last-child（n）

结构性伪类选择符E:
nth-last-child（n）

9nthlastoftype

DOCTYPEhtml>

结构性伪类选择符E:nth-last-of-type（n）

描述：

匹配同类型中的倒数第n个同级兄弟元素E。

语法：

nth-last-of-type（n）{sRules}

-->

我是一个p元素

我是一个div元素

我是一个p元素

10nthoftype

DOCTYPEhtml>

结构性伪类选择符E:nth-of-type（n）

描述：

匹配同类型中的第n个同级兄弟元素E。

语法：

nth-of-type（n）{sRules}

-->

我是一个p元素

我是一个div元素

我是一个p元素

11onlychild

DOCTYPEhtml>

结构性伪类选择符E:only-child

描述：

匹配父元素仅有的一个子元素E。

要使该属性生效，E对象必须是某个对象的子元素。

语法：

only-child{sRules}

-->

只有唯一一个子元素

结构性伪类选择符E:
only-child

有多个子元素

结构性伪类选择符E:
only-child

结构性伪类选择符E:
only-child

结构性伪类选择符E:
only-child

12onlyoftype

DOCTYPEhtml>

结构性伪类选择符E:only-of-type

描述：

匹配同类型中的唯一的一个同级兄弟元素E。

语法：

only-of-type{sRules}

-->

结构性伪类选择符E:

only-of-type

13right

DOCTYPEhtml>

@page:right

描述：

设置页面容器位于装订线右边的所有页面使用的样式。

仅用于@page规则。

语法：

@page:

right{sRules}

-->

有很长的一句话来测试页面容器位于装订线右边的所有页面左外边距为300px

14root

DOCTYPEhtml>

结构性伪类选择符E:root

描述：

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

在HTML中，根元素永远是HTML

语法：

root{sRules}

-->

列表项一

列表项二

列表项三

15target

DOCTYPEhtml>

目标伪类选择符E:target

描述：

匹配相关URL指向的E元素。

语法：

target{sRules}

-->

前往区块1

前往区块2

前往区块3

前往区块4

前往区块5

区块1

区块1内容

区块2

区块2内容

区块3

区块3内容

区块4

区块4内容

区块5

区块5内容

16visited

DOCTYPEhtml>

链接伪类选择符E:visited

描述：

设置超链接a在其链接地址已被访问过时的样式。

语法：

visited{sRules}

-->

外部链接

外部链接

展开阅读全文

伪类选择器.docx

注意是li:last-child，而不是ul:last-child

第二行要变成红色li:nth-child（2）{color:#f00;}

最后一行要变成红色li:nth-last-child（1）{color:#f00;}

只有唯一一个子元素

有多个子元素

区块1

区块2

区块3

区块4

区块5

注意是li:
last-child，而不是ul:
last-child

第二行要变成红色`li: nth-child （2）{color:`
`#f00;}`

最后一行要变成红色`li: nth-last-child （1）{color:`
`#f00;}`