学习记录 --【零基础CSS学习】05.并集选择器和交集选择器

最新推荐文章于 2024-06-02 14:45:23 发布

钟情于山海

最新推荐文章于 2024-06-02 14:45:23 发布

阅读量1.8k

点赞数

文章标签： css 学习前端

本文链接：https://blog.csdn.net/m0_37612107/article/details/124684200

版权

前言

一、并集选择器

二、交集选择器

前言

写这个初衷是为了记录自己学习的过程，强制打卡，希望自己不要半途而废，也希望可以给和我一样的入门小白提供一些参考。

我的学习就是跟着视频学习，浏览一些教学网站，边看边学边练，希望大家一起进步。

一、并集选择器

并集选择器
1.同时选中多个元素
2.选择时要用","连接
3.标签选择器，id选择器，class选择器都可以混合使用

示例1：

利用并集选择器，同时选择div和第一个p元素，对里面的内容进行相同的样式设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css">
        div,#one{
            color: green;
        }
    </style>
</head>
<body>
    <div>我想去学习</div>
    <p id="one">我是1号p元素</p>
    <p>我是2号p元素</p>
</body>
</html>

其实除了用并集选择器这么做以外，还能为div和p元素设置同一个类名，也可以实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用类选择器实现</title>
    <style type="text/css">
        #one{
            color: green;
        }
    </style>
</head>
<body>
    <div class="one">我想去学习</div>
    <p class="one">我是1号p元素</p>
    <p>我是2号p元素</p>
</body>
</html>

二、交集选择器

1.选择的元素要同时满足多个条件
2.选择器间紧紧相连
3.标签选择器放在前，类选择器在后

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style type="text/css">
        div.abc{
            color: red;
        }
    </style>
</head>
<body>
<div>我要自学网1</div>
    <div class="abc">我要自学网2</div>
    <p class="abc">我要自学网3</p>
</body>
</html>