结构化伪类选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习结构性伪类选择器</title>
    <style type="text/css">
        body{
            font-size: 12px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        p:last-child{
            color: blue;
        }
        p:first-child{
            color: pink;
        }
    
    </style>
</head>
<body>
    <div>
        <p>结构性伪类选择器允许开发者根据文档结构类指定元素的样式</p>
        <p>结构性伪类选择器允许开发者根据文档结构来指定元素的样式</p>
        <p>结构性伪类选择器允许开发者根据文档结构来指定元素的样式</p>
        <p>结构性伪类选择器允许开发者根据文档结构类指定元素的样式</p>
        <p>结构性伪类选择器允许开发者根据文档结构来指定元素的样式</p>
        <p>结构性伪类选择器允许开发者根据文档结构来指定元素的样式</p>
    </div>

    <div>
        <h3>结构性伪类选择器允许开发者根据文档结构来指定元素的样式</h3>
        <h3>结构性伪类选择器-- first-child last-child nth-child(n) nth-last-child(n)</h3>
        <h3>结构性伪类选择器-- first-of-type  last-of-type nth-of-type(n) nth-0f-last-type(n)</h3>
        <p>结构性伪类选择器</p>
        <p>结构性伪类选择器</p>
    </div>
</body>
</html>

 1     <style type="text/css">
 2         body{
 3             font-size: 12px;
 4             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 5         }
 6         p:last-child{
 7             color: blue;
 8         }
 9         /* p:first-child{
10             color: pink;
11         } */
12 　　　　/*获取p元素的父元素中的第一个p元素设置成粉色*/
13         p:first-of-type{
14             color: pink;
15         }
16 
17 
18     
19     </style>

 

 
<ul type="circle">
        <li>first-child</li>
        <li>last-child</li>
        <li>only-child</li>
        <li>nth-child</li>
        <li>nth-last-child</li>
        <li>-------------</li>
        <li>first-of-type</li>
        <li>last-of-type</li>
        <li>nth-of-type</li>
        <li>nth-of-type</li>
        <li>only-type</li>
    </ul>

        li:nth-child(3){
            background-color: red;
        }
li父元素的第3个节点如果是li的话，那么背景色是red

　

 

 

      li:nth-child(odd){
            background-color: red;
        }
odd奇数  even偶数

　　

　

　

 

 

li:nth-child(3n){
            background-color: red;
        }
3 6 9这些3的倍数

　　

 

 

 

　　

posted on 2021-07-21 18:32  谋生的日记本  阅读(159)  评论(0)    收藏  举报

导航