css学习笔记(三)

最新推荐文章于 2025-04-24 09:09:44 发布

原创最新推荐文章于 2025-04-24 09:09:44 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

7 篇文章

订阅专栏

今天学习下交集选择器和并集选择器

交集选择器:我们在高一还是初一就会学到交集这个概念,表示即...又...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        ul li >a{
            color: red;
        }
    </style>
</head>
<body>

    <div>周杰伦</div>
    <div>周杰伦</div>
    <div>周杰伦</div>
    <p>周杰伦</p>
    <p>周杰伦</p>
    <p>周杰伦</p>

</body>
</html>

比如我这些都是红色,我现在想让第三个蓝色,其他颜色不变,当然你也可以在第三个标签使用类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        div.a{
            color: red;
        }
    </style>
</head>
<body>
    <div>周杰伦</div>
    <div>周杰伦</div>
    <div class="a">周杰伦</div>
    <p>周杰伦</p>
    <p>周杰伦</p>
    <p>周杰伦</p>
</body>
</html>

其中a是类选择器的名称,它是作用于div标签上,所以也可以这么写

   <style>
        div.a{
            color: red;
        }
    </style>

这就是交集选择器表示在即在div上也在类选择器a上相对第三个文本来说,这个使用不多.

并集选择器

就是很多个标签使用到同一个属性

语法 a,b,c{} 中间用逗号分开即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        div.a{
            color: red;
        }
    </style>
</head>
<body>
    <a>周杰伦</a>
    <p>周杰伦</p>
    <h1>周杰伦</h1>
    <span>周杰伦</span>
</body>
</html>

比如我上面四个标签文字都要变成红色,这是这样

 a,p,h1,span{
            color: red;
        }

当然除了使用标签也可以使用类选择器写法和上面一样