CSS中的伪类和目标选择器使用

(一)结构伪类选择器

常见的结构伪类选择器：

• :first-child选取首个子元素
• :last-child选取最后一个子元素
• :nth-child(n)匹配属于父元素的地n个子元素 n的值，0.1.2.3…
  • 匹配偶数位置的子元素 :nth-child(even)或:nth-child(2n)
  • 匹配奇数位置的子元素:nth-child(odd) 或 :nth-child(2n-1) 或 :nth-child(2n+1)
• nth-last-child 与 nth-child 语法相同，不过nth-last-child是从最后一个元素开始的;nth-child:是从第一个元素开始的

实例

li:first-child{}	/*选取首个子元素*/
    
li:last-child{}		/*选取最后一个子元素*/

li:nth-child(n){}   /*第n个子元素 n的值，0.1.2.3...*/

/*匹配偶数位置的子元素*/
li:nth-child(even){}
li:nth-child(2n){}

/*匹配奇数位置的子元素*/
li:nth-child(odd){}
li:nth-child(2n-1){}
li:nth-child(2n+1){}

(二)结构伪类选择器

:target目标伪类选择器，选择器可用于选取当前活动的目标元素

实例

<style>
/*:target目标伪类选择器，选择器可用于选取当前活动的目标元素*/
:target{color: red;}
</style>

<a href="#top">锚点</a>
<div id="top">
   我是本页面锚点的内容点
</div>