CSS(十二)——选择器补充
文章目录
伪类选择器补充
回顾基础:伪类选择器的爱恨法则(lvha)——link(超链接未访问)、visited(超链接访问后的状态)、hover(鼠标悬停状态)、激活状态(active)。
first-child:选择第一子元素
一般会与其他选择器配合使用,例如下面的样式:
.main>ul>li:first-child{
/*该样式表示选中main下面ul里面的第一个li元素*/
}
first-of-type:选择第一个对应类型的子元素。
**【注】:**不一定是第一个元素,只是该类型的第一个子元素。如下:
.main>ul>a:first-of-type{
/*表示选择ul下第一个a元素*/
}
last-child:
选中最后一个子元素,一般也是与其他元素与选择器配合使用。
.main>ul>li:first-child{
/*该样式表示选中main下面ul里面的最后一个li元素*/
}
last-of-type:选择最后一个对应类型的子元素
.main>ul>a:last-of-type{
/*表示选择ul下最后一个a元素*/
}
nth-child:选中指定的第几个子元素
.main>ul>a:nth-child(5){
/*必须是a元素,且必须市第五个子元素*/
}
在这里,n可以是一个变量,可以表示技术或者偶数。
nth-of-type:选择指定的类型的第几个元素
.main>ul>a:nth-of-type(n){
/*选择a元素,且是指定位置的元素*/
}
一般以上类型的选择器用于完成有规律的设置样式的操作。
first-letter:选中元素中的第一个字母。
.main>ul>a:first-letter{
/*第一个字母为红色*/
color:red;
}
first-line:选中元素中第一行文字
.main>ul>p::first-line{
/*设置p元素中第一行文字的背景颜色为红色*/
background-color: red;
}
selection:选中被用户框选的文字
/*用来修改框选文字的相关样式*/
.main>ul>p::selection{
background-color: #008c8c;
}
总结
本篇笔记没什么特别好总结的,主要补充一下更多的选择器的相关概念和写法,具体有什么作用请联想自己在浏览网页时遇见的相关样式。