问题描述
近日做一个网站,设计关于tabcontainer的问题的时候在网上找到如下资料/..../ASP.NETAJAXTabs控件样式控制AJAX自从引进了Tab，着实让我开心了一番。但是，在调整Tab的样式的时候，也着实让我吃了一惊。于是，抱着没有困难也要制造困难的原则，开始了征途：按照Tab作者RonaldBuckton所说，Tab的CSS包含如下几个类：(1).ajax__tab_header:AcontainerelementthatwrapsallofthetabsatthetopoftheTabContainer.(2).ajax__tab_outer:Anouterelementofatab,oftenusedtosettheleft-sidebackgroundimageofthetab.(3).ajax__tab_inner:Aninnerelementofatab,oftenusedtosettheright-sideimageofthetab.(4).ajax__tab_tab:Anelementofatabthatcontainsthetextcontent.(5).ajax__tab_body:AcontainerelementthatwrapstheareawhereaTabPanelisdisplayed.(6).ajax__tab_hover:Thisisappliedtoatabwhenthemouseishoveringover.(7).ajax__tab_active:Thisisappliedtoatabwhenitisthecurrentlyselectedtab.我画了个简图，当然，鼠标放上去(.ajax__tab_hover)，和当前Tab(.ajax__tab_active)的那个就没画上去。/..../然后作者给了一个简单的样式表CSS:.ajax__tab_Default.ajax__tab_header{padding:12px000px;height:20px;background:#EDEDEDurl(Icons/TabLine.gif)repeat-xbottom;}.ajax__tab_Default.ajax__tab_outer{}.ajax__tab_Default.ajax__tab_inner{}.ajax__tab_Default.ajax__tab_tab{margin-left:10px;text-align:center;padding:5px5px3px10px;font-size:12px;width:100px;cursor:pointer;}.ajax__tab_Default.ajax__tab_hover.ajax__tab_outer,.ajax__tab_Default.ajax__tab_active.ajax__tab_outer{}.ajax__tab_Default.ajax__tab_hover.ajax__tab_inner,.ajax__tab_Default.ajax__tab_active.ajax__tab_inner{}.ajax__tab_Default.ajax__tab_active.ajax__tab_tab,.ajax__tab_Default.ajax__tab_hover.ajax__tab_tab{margin-left:10px;text-align:center;padding:5px5px3px10px;font-size:12px;border:solid1px#9FACB5;background-color:#fff;cursor:pointer;}.ajax__tab_Default.ajax__tab_active.ajax__tab_tab{border-bottom:solid1px#FFF;}.ajax__tab_Default.ajax__tab_hover.ajax__tab_tabspan,.ajax__tab_Default.ajax__tab_active.ajax__tab_tabspan{color:#B82400;}.ajax__tab_Default.ajax__tab_body{}对于作者给出的层次结构,我看的还不是很清楚,谁能把这个控件的CSS层次讲的更清楚一点还有弱弱的问一个问题在这段中.ajax__tab_Default.ajax__tab_active.ajax__tab_tab,.ajax__tab_Default.ajax__tab_hover.ajax__tab_tab{margin-left:10px;text-align:center;padding:5px5px3px10px;font-size:12px;border:solid1px#9FACB5;background-color:#fff;cursor:pointer;}Default后面有个空格,空格后面才是.,我去掉空格后发现不起作用了为什么需要加空格啊,这个是什么原理,谁能解释一下
解决方案
解决方案二：
up
解决方案三：
1你需要看看css布局的资料2为什么需要加空格啊和csharp中需要空格一样。
解决方案四：
付上原文http://ktsky.cnblogs.com/顶上去
解决方案五：
.ajax__tab_Default.ajax__tab_active.ajax__tab_tab,.ajax__tab_Default.ajax__tab_hover.ajax__tab_tab--------------------这个表示所有ajax__tab_Default,ajax__tab_active等所有class类都使用下面一样的style
解决方案六：
Default后面有个空格,空格后面才是.,我去掉空格后发现不起作用了为什么需要加空格啊,这个是什么原理,谁能解释一下-------------------------这不是什么原理，只是CSS要求的格式，就好像C#中变量类型和变量名之间必须要有空格一样，只是格式问题，没什么原理
解决方案七：
.ajax__tab_Default.ajax__tab_active.ajax__tab_tab,.ajax__tab_Default.ajax__tab_hover.ajax__tab_tab--------------------这个表示所有ajax__tab_Default,ajax__tab_active等所有class类都使用下面一样的style_____________________________________________________________________________________这个.应该表示子类的关系吧,谁能给个更详细的图解,把所有的类和子类在图上表示出来
解决方案八：
对，我记错了，子类是用空格，我说的“这个表示所有ajax__tab_Default,ajax__tab_active等所有class类都使用下面一样的style”是用,分开的。