css中选择器比如.product .product-content{}和单独.product-content{}有什么不同？

Question

product-content是product包裹的一个div，看到有些地方为什么是写.product .product-content{}而不直接写.product-content{}呢？两者有什么不同吗？（第一个是子选择器）

Answer 1

其实效果都一样

1. 前者，查找的的是.product下的所有.product-content,而.product-content则会从整个文档里找

2. 权重不同， 你可以把一个class名记为10分，那.product .product-content就是20分，.product-cotent就是10分，如果这两者同时写出来，无论顺序如何，都是那个子选择器的样式
   

Answer 2

第一：作用范围不一样，“.product-content{}”会给全局的class名为“product-content“附样式，

“.product .product-content{}”只会给“product”内的“product-content”附样式

第二：优先级不一样，“.product .product-content{}”的优先级比“.product{}”的优先级高

Answer 3

这样看的清晰些，你觉得这个第一个li标签它是红色还是蓝色呢？

Answer 4

第一个权重更高,只设置.product下的 .product-content;第二种设置所有的 .product-content