css3选择器高级部分

发布时间：2020-10-30 00:51:42 ，浏览量：7

序选择器;

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:first-child代表了父元素div的第一个子元素如果为p的话,设为红色.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:first-of-type代表了给选中的是同级别中的第一个p设置颜色.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:last-child代表了给子元素的最后一个设置颜色.也就是说必须有父子关系的.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:last-of-type代表了同级别的最后一个p设置颜色.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:nth-child(3)代表了同级别的第三个元素如果是p的话,设置颜色,

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:nth-of-type(3)选中的是同级别的第三个p设置颜色.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:nth-last-child(2)选中的是同级别的倒数第二个如果为p设置颜色.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

p:nth-last-of-type(2)代表了同级别的同类型的倒数第二个p设置颜色.

在这里插入图片描述

Document 我是标题

我是段落1

我是段落2

我是段落3

我是段落4

我是段落5

我是段落6

我是段落7

我是段落8

666

p:only-child代表了父元素中只有一个子元素p

在这里插入图片描述

Document

666

p:only-of-type代表了只有一个p

在这里插入图片描述

Document

"para">我是段落1

"para">我是段落2

我是标题

.para:only-of-type代表了在同级别中只有一个类型.para

在这里插入图片描述

Document

我是项目

p:nth-child(odd)同级别中奇数的.设置颜色.

在这里插入图片描述

Document

我是项目

p:nth-child(even)选中的是为偶数的.

在这里插入图片描述

Document

我是项目

p:nth-of-type(odd)代表了只能是类型为p的设置颜色.(奇数)

在这里插入图片描述

Document

我是项目

p:nth-of-type(even)代表只能是类型为p的偶数的设置颜色

在这里插入图片描述

Document

我是项目

n是一个计数器, 从0开始递增 p:nth-child(2n+0)是02468红色. p:nth-child(2n+1)是13579设置为蓝色.

在这里插入图片描述

Document

我是项目

p:nth-child(3n+0)代表了3 6 n是一个计数器, 从0开始递增

在这里插入图片描述

"en">"UTF-8">20-属性选择器上
		
			"identity1">我是段落1
		

		
			"identity2" class="cc">我是段落2
		

		
			"cc">我是段落3
		

		
			"identity3" class="para">我是段落4
		

		
			我是段落5

p[class=cc]代表了给p标签class为cc的都设置颜色.

在这里插入图片描述

1.什么是属性选择器? 作用: 根据指定的属性名称找到对应的标签, 然后设置属性格式: [attribute] 作用:根据指定的属性名称找到对应的标签, 然后设置属性 [attribute=value] 作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性最常见的应用场景, 就是用于区分input属性 input[type=password]{}

"en">"UTF-8">21-属性选择器下 "" alt="abcwwwmmm"> "" alt="wwwmmmabc"> "" alt="wwwabcmmm"> "" alt="www-abc-mmm"> "" alt="www abc mmm"> "" alt="qq">

img[alt~=abc]代表了~=代表了空格的其中有abc的

注意点: [attribute|=value]代表了value与其他内容是用-隔开的. [attribute^=value]CSS3代表了开头是value就行，其他的不管 [attribute~=value]CSS2代表了被空格隔开的包含value的就行 [attribute*=value] CSS3代表了只要包含value就行了

在这里插入图片描述

通配符选择器：

Document 我是标题

我是段落

"#">我是超链接

在这里插入图片描述

关注

打赏

1653961664

查看更多评论

css3选择器高级部分

最近更新

热门博客

[ 申请 ]友情链接：