CSS后代选择器可能的错误认识

Posted 2020-07-01 十二分努力

一、关于类选择器的一个问题

    CSS代码：

.red { color: red; }
.green { color: green; }

 html代码：

<div class="red"><div class="green"><p>1. 颜色是？</p></div></div>
<div class="green"><div class="red"><p>2. 颜色是？</p></div></div>
第一行和第二行文字颜色分别是 绿 红
原因：DOM越深的类名权重越高

二、类选择器→后代选择器

.red p { color: red; }
.green p { color: green; }

<div class="red"><div class="green"><p>1. 颜色是？</p></div></div>
<div class="green"><div class="red"><p>2. 颜色是？</p></div></div>

第一行和第二行文字颜色分别是  绿 绿

原因：祖先选择器对应DOM无论多深多浅都是同一级别的，而最终起作用的是选择器声明在CSS样式中的顺序，即优先显示后面的CSS声明

三、not选择器→后代选择器

:not(.green)  p { color: red; }
.green p { color: green; }

<div class="red"><div class="green"><p>1. 颜色是？</p></div></div>
<div class="green"><div class="red"><p>2. 颜色是？</p></div></div>

第一行和第二行文字颜色分别是  绿 绿