CSS-结构伪类选择器(根据标签去定位元素( ul li:last-child)、根据父类去定位元素(p:nth-child(1){))、根据标签类型去定位元素(p:nth-of-type(2){})


结构:
   ul li:last-child

拆解:
    ul li:标签位置,就是说要定位ul标签中的li标签
    ” :“:表示伪类,伪类选择器要写的符号。
  
last-child:定位ul标签中最后一个li元素

  first-child:定位ul标签中第一个li元素
 
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器title>
  
  <style>
        /*选中ul的第一个子元素*/
    ul li:first-child{
      /*
      ul li:标签
      first-child:第一个
      */
      background:#02ff00;
      
    }
    
        /*选中ul的最后一个子元素*/
        ul li:last-child{
      /*
      ul li:标签
      last-child:最后一个
      */
      background:#02ff00;
      
    }
    
  style>
  
head>
<body>
    <p>p1p>
   <p>p2p>
   <p>p3p>
  <ul>
    <li>li1li>
    <li>li2li>
    <li>li3li>
  ul>
  
  
  
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器title>
  
  <style>
  
    /*只选中p1,定位到父元素,选择当前的第一个元素
    选中当前元素的父级元素,选中父级元素的第一个,但是这个p标签要在第一个元素,如果你要选中的p标签前面有其他标签元素,那就会阻碍生效,解决方式是我们把括号中的1,改成从父类第一行数,到你要定位的元素是第几行,那就把1,改成对应的数就行了
    */
    p:nth-child(1){/*根据父类去定位*/
      background:#02ff00;
    }
    p:nth-of-type(2){/*根据类型去定位,当前代码的父类元素都是body标签,表示选择父类中第二个类型为p标签的元素*/
      background:#020f00;
    }
    
  style>
  
head>
<body>
    <p>p1p>
  
   <p>p2p>
  
   <p>p3p>
  <ul>
    <li>li1li>
    <li>li2li>
    <li>li3li>
  ul>
  <p>p1p>
  
  
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器title>
  
  <style>
    a:hover{/*把鼠标放到a标签文字上,改变文字颜色
  hover:动作
*/ background:yellow; } style> head> <body> <p>p1p> <a href="">44554a> <p>p2p> <p>p3p> <ul> <li>li1li> <li>li2li> <li>li3li> ul> <p>p1p> body> html>
CSS