CSS05:结构伪类选择器

伪类用于定义元素的特殊状态。

如,它可以用于:

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式

本文只列举了一部分应用,其他的可以看CSS 伪类 (w3school.com.cn)

元素:first-child

        选择作为其父的首个为当前元素的子元素




    
    Title

    


p1

p2

p3

  • li1
  • li2
  • li3

 CSS05:结构伪类选择器_第1张图片

 

元素:last-child

        选择作为其父的最后一个为当前元素的子元素




    
    Title

    


p1

p2

p3

  • li1
  • li2
  • li3

CSS05:结构伪类选择器_第2张图片

元素:nth-child(n)

        选择作为其父的第 n 个是当前元素的子元素

        注意:如果第 n 个元素不是当前元素,那么选择不到元素,样式不生效




    
    Title

    


p1

p2

p3

  • li1
  • li2
  • li3

CSS05:结构伪类选择器_第3张图片

 

元素:nth-of-type(n)

        选择作为其父的第 n 个是当前元素的子元素(只统计是当前元素的元素)

如下面的例子,如果按 nth-child(2) 选择,那么将不会生效,因为第二个元素是 h1 不是 p,而 nth-of-type(2) 只会找 p 元素的第二个




    
    Title

    


我是标题1

我是标题2

p1

p2

p3

  • li1
  • li2
  • li3

CSS05:结构伪类选择器_第4张图片

 

元素:hover

        鼠标悬停于当前元素时,选择当前元素

如下面的例子:鼠标悬停于 p 元素时,添加背景色




    
    Title

    


p1

p2

p3

  • li1
  • li2
  • li3

下图是鼠标悬停在上面的结果 

CSS05:结构伪类选择器_第5张图片

 

你可能感兴趣的:(#,CSS,css,css3,前端)