AI智能
改变未来

css3结构伪类选择器使用


css3基础

1.结构伪类选择器


结构伪类选择器使用方法比如:
E:first-child 匹配父元素中的第一个子元素E

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>```cssul li:first-child{color:red;}

如此写就可以进行对父元素中的第一个子元素进行选择并且可以将第一个子元素的字体颜色变成红色;
E:last-child 选择父元素中的最后一个子元素并进行更改

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>ul li:last-child{color:red;}

如此和first-child的用法一样
当你想选中父元素中的某一个子元素是你可以用下面的结构伪类选择器

E:nth-child(n)

<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>ul li:nth-child(3){color:red;}even代表的是偶数可以将父元素中的偶数项进行变色odd 代表的是偶数可以将父元素中的奇数项进行变色如此就可以将第三个li进行改变字体颜色ul li:nth-child(even){color:bule}

注意:类选择器 ,属性选择器,伪类选择器的权重为10

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » css3结构伪类选择器使用