                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /DOM事件探秘

我想問一下這節(jié)關(guān)于CSS樣式的問題。。。。

為什么光改類名就能改變顯示的東西？

灼眼繁華

2015-08-10

源自：DOM事件探秘 4-3

關(guān)注問題我要回答

1084

操作

收起

2 回答

marshall_stan
2015-08-11

class可以設(shè)置多個，也就是可以有多個類名比如class="abc abcd"（空格分開），那么它既屬于abc類也屬于abcd類。login_state_show +id就是既屬于login_state_show類也屬于id這個字符串代表的類。你看main.css里面設(shè)置背景圖的格式，例如：

.login-state?.callme?{
????background:?url("images/ptlogin.png")?-72px?0?no-repeat;
}

它是先定位到login-state這個類，再找這個類下面的callme類，因此也就定位到了下面這個div。

<div?id="loginStateShow"?class="login-state-show?callme">狀態(tài)</div>

其實前面login-state-show這個類在這一步中根本沒有用到，但是其他地方會用，我們不能把它直接去掉，所以用login_state_show +id。

如果說的有錯誤，請大牛指出，謝謝。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

灼眼繁華提問者

謝謝~大疑問解決了，剛才我看的時候又有個小疑問....如果他擁有兩個類名，而這兩個在CSS中同時對margin設(shè)置，元素怎么表現(xiàn)？比如他哪個login_state_trigger 和login_state_trigger2就都對maigin進行了設(shè)置，但是最后表現(xiàn)的是login_state_trigger2的margin，我把兩個樣式程序的位置對換了一下以后，margin就變成了login_state_trigger設(shè)置的樣子，我猜測是加載順序的原因，不知道對不對~

2015-08-11 回復(fù) 有任何疑惑可以回復(fù)我~

#2

marshall_stan 回復(fù) 灼眼繁華提問者

應(yīng)該是這樣理解的。這些你可以看下“就近原則”和選擇器的權(quán)值那些內(nèi)容。

2015-08-11 回復(fù) 有任何疑惑可以回復(fù)我~

#3

灼眼繁華提問者回復(fù) marshall_stan

嗯，好的，謝謝~

2015-08-11 回復(fù) 有任何疑惑可以回復(fù)我~

丶小八戒
2015-08-11

不同的類定義了不同的樣式，你改了類名，就引用了不同的樣式，顯示方式就不同了。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

灼眼繁華提問者

我知道的啊.但是為什么呢....我看到類的命名好像有規(guī)律，比如的login_state_show +id，還有ul的類名statePanel login_state，我可以理解為在知道一個ul類名為login和li的id的情況下，另一個類名命名為login_show +id就可以達到類似效果嗎？

2015-08-11 回復(fù) 有任何疑惑可以回復(fù)我~

#2

丶小八戒回復(fù) 灼眼繁華提問者

有點不太明白你描述的意思。你要不把代碼貼一下。我看看你的js和css怎么寫的

2015-08-11 回復(fù) 有任何疑惑可以回復(fù)我~

#3

灼眼繁華提問者回復(fù) 丶小八戒

我自己不會寫...是老師的代碼沒看懂，樓下的答案基本解決了，簡單來說就是我不知道一個元素可以有多個類名...總之還是謝啦~

2015-08-11 回復(fù) 有任何疑惑可以回復(fù)我~