关于CSS选择器优先级的问题

Question

<style>
  .preview p { 
    color: red;
  }
  .preview__black {
    color: black;
  }
</style>

<div class="preview">
  <p class="preview__black" aaa>我是一个p</p>
</div>

请问 标签选择器的优先级不是低于类(class)选择器吗？为什么此处p标签的颜色会是红色？

Answer 1

因为.preview也是一个class标签 加上p 权重比.preview__black高

准确说来

.preview p { 
  color: red; // 权重 0 1 1
}

.preview__black {
  color: black; // 权重 0 1 0
}

所以显示的红色

Answer 2

1、优先级：　!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器
2、权值：选择器的权值相加，大值优先

标签选择器：0,0,0,1
类选择器：  0,0,1,0
ID选择器：  0,1,0,0
内联样式：  1,0,0,0

.preview p 权值：10+1=11
.preview__black 权值：10 所以显示红色

Answer 3

因为你上面也有标签选择器啊，而且还加了个p，累加的

Answer 4

.preview p是类加标签 权重大于单纯一个类的权重

Answer 5

权重叠加。
标签 1
类 10
id 100
.preview p的权重是10+1=11，.preview__black权重是10。

Answer 6

Answer 7

.preview .preview__black {
  color: black; 
}

Answer 8

选择器权重会累加
可以看下https://www.cnblogs.com/zxjwl...
这篇文章

Answer 9

见CSS Selector覆盖顺序