[英]CSS Nested not working the way i want it to!

Well lets say i have this


<table class="infoBox">
                        this should not be bold!

And then we got some css for this


Table.infoBox tr td { font-weight: bold; }

Table.infoBox tr td {font-weight:bold; }

now my problem is that the nested table seems to get the css also when i only want the outer table to get this css how do i define it in a way so that nested tables are not affected by the css?


4 个解决方案


While you could do this with immediate child, this isn't supported by all browsers. Try:


table.infoBox tr td { font-weight: bold; }

table.infoBox table tr td { font-weight: normal; }

All that the selector table.infoBox tr td says is:

選擇器table.infoBox tr td所說的全部是:

Apply this style to any <td> tag which is a child of any <tr> tag, which is a child of any table with a class of infoBox.


Therefore, you need to get more specific below this style block in order to declare what you want to do for tables within tables of class infoBox.



Either use the child selector:


table.infoBox > tbody > tr > td { font-weight: bold; }

(not supported in IE6)


Note: the mysterious tbody element. This is inserted by the browser if you don't put it in. That's because tables have three sections: thead, tbody and tfoot.In the absence of one of those, rows are added to the tbody element.


or a combination:


table.infoBox tr td { font-weight: bold; }
table.infoBox tr td td { font-weight: normal; }

There are many potential variations of this one.



Table.infoBox table tr td { font-weight: normal; }

Table.infoBox表tr td {font-weight:normal; }


It may also suffice to use:


table.infoBox { font-weight: bold; }
table.infoBox table { font-weight: normal; }


table.infoBox tr { font-weight: bold; }
table.infoBox table tr { font-weight: normal; }

Though all css depends on other font-weight rules throughout your css, it's handy to note that css declerations are based on decendensy, not direct parent child relation ship. So table{} will have just the same effect on the content as td{} so long as you don't have anything stronger or closer to the content defined.

雖然所有css都依賴於整個css中的其他字體權重規則,但是很容易注意到css declerations是基於decendensy而不是直接的父子關系。因此,只要您沒有更強或更接近定義的內容,表{}將對內容產生與td {}相同的效果。



粤ICP备14056181号  © 2014-2020 ITdaan.com