<style type="text/css">
div.demo{
color: black;
}
div.wrap .demo{
color: yellow;
}
div.wrap > .demo{
color: blue;
}
div.wrap + .demo{
color: red;
}
div.demo + .demo{
color: red;
}
</style>
<div class="wrap">
<div class="demo">
Hello
</div>
<div class="demo">
World
</div>
</div>
Hello 和 world 两个单词分别是什么颜色？
答案： Hello world
解析：
1. div.demo 元素与类样式交集选择器 Hello World 为黑色
2. div.wrap .demo 覆盖样式1 Hello World 为黄色
3. div.wrap > .demo 覆盖样式2 Hello World 为蓝色
4. div.wrap + .demo 选择在 div.wrap 后的第一个兄弟元素并且类样式为 .demo 的元素为红色, 没有选中任何元素，此选择器无效
5. div.demo + .demo 选择在 div.demo 后的第一个类样式为 .demo 的兄弟元素 设置为红色, World 变成红色,Hello 还是蓝色