求CSS3中target选择器的用法

Posted 2023-03-15

现在有点混乱
<style>
:target p
background-color:red;
//这是第一段代码

#columnvalue:target p
background-color:red;
//这是第二段代码
</style>

<div class="columnvalue">
<a href="#columnvalue"> value</a>
<p>content for value</p>
</div>

就是一段和第二段代码有什么区别？

参考技术A 您好，:nth-child()用法
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
在w3c中说明的 n 可以是数字、关键词或公式。常用的有4中写法。
1.具体的数字
:nth-child(n):匹配父元素中第n个元素，例：li:nth-child(3)background:green;
2.倍数
:nth-child(an):匹配父元素中第a数倍的元素，例:li:nth-child(2n)background:red;
3.倍数分组
:nth-child(an+b)或:nth-child(an-b):先对元素进行分组，每组有a个，b为组内成员的序号，其中字母n和加号+不可缺省，位置不可调换，这是该写法的标志，其中a,b均为正整数或0。如3n+1、5n-1。
4.奇偶写法
:nth-child(odd)和:nth-child(even):分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样；偶数(even)与(2n+0)及(2n)结果一样。
:nth-of-type()的用法

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.这个的用法和:nth-child(n)的用法类似，不同的是:nth-child(n)所匹配的元素必须有父元素包着。但:nth-of-type(n)可以匹配特定类型元素行。
浏览器支持
所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。本回答被提问者和网友采纳