详解CSS（八）

🏍️作者简介：大家好，我是亦世凡华、渴望知识储备自己的一名在校大学生

🛵个人主页：亦世凡华、

🛺系列专栏：CSS专栏

🚲给大家推荐一个网站😉很实用😚我一直在上面刷题：点击跳转进入网站注册登录即可刷题

z-index

z-index表示谁压盖着谁，数值大的会压盖住数值小的，只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index。

z-index的值是没有单位的，值是一个正整数，默认的z-index的值是0，如果多个定位的元素没有设置z-index属性，或者z-index值设置是一样的，那么在HTML后面的定位元素就会压盖住前面的定位元素。

<!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>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        .div1{
            background-color: #f00;
            /* 绝对定位 */
            position: absolute;
            /* 绝对定位坐标 */
            left: 100px;
            top: 100px;
        }
        .div2{
            background-color: #00f;
            /* 绝对定位 */
            position: absolute;
            /* 绝对定位坐标 */
            left: 200px;
            top: 200px;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

当我们设置了z-index属性时

结构伪类

选择器	功能
E:first-child	匹配第一个孩子
E:last-child	匹配最后一个孩子
E:nth-child(n)	匹配第n个孩子
E:nth-child(2n)	匹配偶数个孩子
E:nth-child(even)	匹配偶数个孩子
E:nth-child(2n+1)	匹配奇数个孩子
E:nth-child(odd)	匹配奇数个孩子
E:only-child()	匹配有且只有一个孩子

<!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>Document</title>
    <style>
        table tr:nth-child(2n){
            background-color: #f00;
        }
        table tr:nth-child(odd){
            background-color: #0f0;
        }
        table tr:hover{
            background-color: #000;
        }
    </style>
</head>
<body>
    <table width="500" border="1" align="center">
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
</body>
</html>

伪元素

选择器	功能
:first-letter	操作当前元素的第一个字
:first-line	操作当前元素的第一行
::before	在之前插入，在一个盒子内部的最前面
::after	在之后插入，在一个盒子内部的最后面

<!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>Document</title>
    <style>
        .box{
            width: 500px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .box:first-letter{
            color: red;
            font-size: 34px;
            font-weight: bold;
        }
        .box:first-line{
            color: slateblue;
        }
    </style>
</head>
<body>
    <div class="box">我是div，内容是：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio modi provident magni voluptatibus optio. Quos, neque! Ex odio incidunt natus ullam, omnis sunt, aliquid tenetur possimus beatae, magnam iure facilis!</div>
</body>
</html>

<!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>Document</title>
    <style>
        .box{
            width: 500px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        .box::before{
            content: "大家好！";
        }
        .box::after{
            content: "hello";
        }
    </style>
</head>
<body>
    <div class="box">我是div，内容是：Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odio modi provident magni voluptatibus optio. Quos, neque! Ex odio incidunt natus ullam, omnis sunt, aliquid tenetur possimus beatae, magnam iure facilis!</div>
</body>
</html>