css常用选择器

1.常用子元素选择器-选择特定子元素

:nth-of-type(n)  选择其父级下的第n个元素
例如:p:nth-child(2)
:last-of-type 选择其父级下的最后一个元素

:nth-child(n) 选择其父级下的第n个子元素

:nth-last-child(n) 选择其父级下的第n个子元素,从最后一个子项计数

:nth-last-of-type(n) 选择其父级下的第n个元素,从最后一个子项计数

:first-child 选择其父级下的第一个子元素

:last-child 选择其父级下的最后一个子元素

:first-line 选择某元素中的第一行
例如: p:first-line - 选择p元素中的第一行


n:可以是数字,也可以是表达式。例如 2n 偶数, 2n+1 奇数等等。
nth-child(n)和nth-of-type区别:
p:nth-of-type(n): 其父元素下的第n个p元素。
p:nth-child(n):其父元素下的第n个且为p的元素,如果不是p,则选择失败

 2.常见选择器

标签选择器: 指用html标签名称作为选择器
类选择器:给标签设置一个类名
id选择器:给html元素指定特定的id名
通配符选择器:找到文中所有的标签并设置样式
复合选择器【后代选择器和子代选择器】:
后代选择器:选择父元素后代中所有满足条件的标签,选择器和选择器之间用空格隔开
例如: 选择器1 选择器2{}
子代选择器:选择父元素子代中所有满足条件的标签,选择器和选择器之间用 > 隔开
例如: 选择器1 > 选择器2 {}
并集选择器:同时选择多组标签并设置样式,选择器和选择器之间用 , 隔开
例如:
选择器1,选择器2,选择器3,...{}
交集选择器: 找到html中同时满足选择器的标签,选择器可以有多个。
例如:
选择器1选择器2...{}
伪类选择器:
hover伪类选择器:将鼠标悬停在元素上,并设置样式。
active伪类选择器:将鼠标点击元素时,并设置样式。

 

posted on 2023-06-16 15:33  有匪  阅读(40)  评论(0编辑  收藏  举报

导航