【无标题】

最新推荐文章于 2024-01-18 23:25:36 发布

小令yyds

最新推荐文章于 2024-01-18 23:25:36 发布

阅读量293

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/m0_63841538/article/details/121854264

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、交集选择器与并集选择器
①交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style>
        div.box {
            color: red;
        }
    </style>
</head>
<body>
<div>狮子</div>
<p>
<div class="box">老虎</div>
</p>
<div class="box">大象</div>
<p class="box">长颈鹿</p>
</body>
</html>代码片

运行如下图:
在这里插入图片描述

交集选择器是选择两个选择器所拥有内容。
②并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集合选择器</title>
    <style>
        div,.box,p.box,#box {
            color: red;
        }
    </style>
</head>
<body>
<div>狮子</div>
<p>
<div class="box">老虎</div>
</p>
<div class="box">大象</div>
<p class="box">长颈鹿</p>
<p>猴子</p>
</body>
</html>

运行结果如下:
在这里插入图片描述
并集选择器是可以指定多个选择器，它们之间用逗号隔开。
2、相邻兄弟选择器和通用的兄弟选择器
①相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        div + p {
            color: red;
        }
    <×yle>
</head>
<body>
<p>狮子</p>
<div>
    <p>老虎</p>
    <p>大象</p>
    <p>长颈鹿</p>
</div>
<p>猴子</p>
<p>老鼠</p>
</body>
<cml>

运行结果如下:
在这里插入图片描述
相邻兄弟选择器，只会选择它之后并且是紧紧挨着的。
②通用的兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用的兄弟选择器</title>
    <style>
        div ~ p {
            color: red;
        }
    </style>
</head>
<body>
<p>狮子</p>
<div>
    <p>老虎</p>
    <p>大象</p>
    <p>兔子</p>
</div>
<p>猴子</p>
<p>狼</p>
</body>
</html>

运行如下图所示:
在这里插入图片描述
通用的兄弟选择器是选择其后面的所有指定的兄弟标签。
3、伪类选择器之hover、first–child、before and after
①hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器之hover</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
        }
        .box:hover {
            cursor: pointer;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

运行如下图所示:
在这里插入图片描述
伪类选择器都是以开头的选择器。hover表示鼠标移到元素上时会自动触发的效果。同时它还需配合其它选择器一起使用。
②first–child

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器之first-child</title>
    <style>
        ul>li {
            list-style: none;
        }
        li:first-child {
            color: red;
        }
        li:last-child {
            color: blue;
        }
        li:nth-child(3) {
            color: green;
        }
    <×yle>
</head>
<body>
<ul>
    <li>狮子<P>
    <li>老虎<P>
    <li>雪狼<P>
    <li>雪狐<P>
</ul>
</body>
<cml>

运行如下图所示:
在这里插入图片描述
第一个用first–child表示最后一个用last–child表示，中间用nth–child（）表示，括号内填第几个。
③before和after

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器之beforeAndafter</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            border: 1px solid #000000;
            position: relative;
        }
        .box:before {
            content: "";
            width: 10px;
            height: 10px;
            border-top: 1px solid red;
            border-left: 1px solid red;
            position: absolute;
            left: -1px;
            top: -1px;
        }
        .box:after {
            content: "";
            width: 10px;
            height: 10px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            position: absolute;
            right: -1px;
            bottom: -1px;
        }
    </style>
</head>
<body>
<div class="box">雪狐</div>
</body>
</html>