已解決430363個問題，去搜搜看，總會有你想問的

css中選擇器比如.product .product-content{}和單獨.product-content{}有什么不同？

關注

首頁猿問 css中選擇器比如.product...

CSS3 Html/CSS

weibo_發呆小賢_0 2016-08-02 15:16:14

product-content是product包裹的一個div，看到有些地方為什么是寫.product .product-content{}而不直接寫.product-content{}呢？兩者有什么不同嗎？（第一個是子選擇器）

查看完整描述

4 回答

已采納

blovetu

TA貢獻319條經驗獲得超234個贊

其實效果都一樣

前者，查找的的是.product下的所有.product-content,而.product-content則會從整個文檔里找
權重不同，你可以把一個class名記為10分，那.product .product-content就是20分，.product-cotent就是10分，如果這兩者同時寫出來，無論順序如何，都是那個子選擇器的樣式

反對回復 2016-08-02

weibo_發呆小賢_0
那在.product-content只有一個的情況下兩種寫法效果就一樣了，還這樣寫是有一些其他方面的考慮嗎？

回復 2016-08-02

安悶墩兒

TA貢獻5條經驗獲得超1個贊

第一：作用范圍不一樣，“.product-content{}”會給全局的class名為“product-content“附樣式，

“.product .product-content{}”只會給“product”內的“product-content”附樣式

第二：優先級不一樣，“.product .product-content{}”的優先級比“.product{}”的優先級高

1 反對回復 2016-08-02

blovetu

TA貢獻319條經驗獲得超234個贊

這樣看的清晰些，你覺得這個第一個li標簽它是紅色還是藍色呢？

反對回復 2016-08-03

剛毅87

TA貢獻345條經驗獲得超309個贊

第一個權重更高,只設置.product下的 .product-content;第二種設置所有的?.product-content

反對回復 2016-08-02

關注