CSS嵌套不按照我想要的方式工作!

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


Well lets say i have this

好吧,讓我說我有這個

<table class="infoBox">
    <tr>
        <td>
            test
        </td>
        <td>
            <table>
                <tr>
                    <td>
                        this should not be bold!
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

And then we got some css for this

然后我們得到了一些css

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?

現在我的問題是,當我只希望外表獲取此css時,嵌套表似乎也獲得了css我如何定義它以便嵌套表不受css的影響?

4 个解决方案

#1


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.

將此樣式應用於任何標記,該標記是任何標記的子標記,該標記是任何具有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.

因此,您需要在此樣式塊下面更具體地說明,以便為類infoBox的表中的表聲明要執行的操作。

#2


Either use the child selector:

使用子選擇器:

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

(not supported in IE6)

(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.

注意:神秘的tbody元素。如果你沒有插入它,瀏覽器會插入它。這是因為表有三個部分:thead,tbody和tfoot。如果缺少其中一個,則將行添加到tbody元素中。

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.

這個有很多潛在的變化。

#3


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

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

#4


It may also suffice to use:

它也可以使用:

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

or

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 {}相同的效果。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2009/05/05/729a71172b4c043dacae87d49e89015b.html



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