CSS:选择器-复合选择器

文章目录

1、交集选择器

html 复制代码
    <style>
        /* 选中类名为rich的元素*/
        .rich {
            color: gold;
        }
        /* 选中类名为beauty的元素*/
        .beauty {
            color: red;
        }
        /* 选中类名为beauty的p元素,这种形式(元素配合类选择器)以后用的很多!! */
        p.beauty {
            color: green;
        }
        /* 选中同时具备rich和beauty类名的元素 */
        .rich.beauty {
            color: orange;
        }
    </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2 class="rich beauty">土豪明星王五</h2>
    <hr>
    <p class="beauty">小狗旺财</p>
    <p class="beauty">小猪佩奇</p>
</body>
相关推荐
IT_陈寒2 小时前
SpringBoot 3.0实战:这套配置让我轻松扛住百万并发,性能提升300%
前端·人工智能·后端
♡喜欢做梦2 小时前
Spring Web MVC 入门秘籍:从概念到实践的快速通道(上)
前端·spring·mvc
Dragon Wu3 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
艾小码3 小时前
2025年前端菜鸟自救指南:从零搭建专业开发环境
前端·javascript
namekong88 小时前
清理谷歌浏览器垃圾文件 Chrome “User Data”
前端·chrome
开发者小天9 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
李少兄11 小时前
HTML 表单控件
前端·microsoft·html
学习笔记10112 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
消失的旧时光-194312 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
曹牧13 小时前
C# 中的 DateTime.Now.ToString() 方法支持多种预定义的格式字符
前端·c#