CSS（十二）——选择器补充

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;
}

总结

本篇笔记没什么特别好总结的，主要补充一下更多的选择器的相关概念和写法，具体有什么作用请联想自己在浏览网页时遇见的相关样式。