css学习笔记(三)

最新推荐文章于 2024-05-30 14:49:04 发布

zhoushenxian

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量144

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/coderinchina/article/details/84448019

版权

css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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

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

<!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;
        }

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

zhoushenxian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css学习笔记(三)

今天学习下交集选择器和并集选择器交集选择器:我们在高一还是初一就会学到交集这个概念,表示即...又...&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css学习&lt;/title&gt;
复制链接

扫一扫

专栏目录