结构伪类选择器

为选择器添加一些特殊效果或者进行约束

1.当需要选中ul中的第一个元素时

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

 ul li:first-child{
     background: red;
 }

2.当需要选中ul中的最后一个元素时

  ul li:last-child{
        background: aquamarine;
    }

3.按父类选择单一元素（不建议）

<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>

 p:nth-child(2){
        background: yellow;
    }

p标签的父元素（body中）的子元素的第二个，并且是当前标签才生效，

如：

<h1>text0</h1>
<p>text1</p>
<p>text2</p>
<p>text3</p>

  p:nth-child(1){
        background: yellow;
    }

此时，选择器不会生效，因为父元素的第一个子元素是<h1>标签

再举一例：

<h1>text0</h1>
<p>text1</p>
<p>text2</p>

p:nth-child(2){
        background: yellow;
    }

此时会生效的是text1，即第二个元素且为p标签

4.按类型选择单一元素

<p>text1</p>
<p>text2</p>
<p>text3</p>

 p:nth-of-type(2){
        background: chocolate;
    }

此时生效的是text2，即选择父元素里面类型为p标签的第二个元素

 

补充：

超链接伪类

• a:link{} 未访问

• a:hover{} 悬浮

• a:visited{} 以访问

• a:active{} 活动链接

通常以a，a:hover来实现