Why doesn't display:none hide a display:table-cell element?

Question

I am trying to use display:none to hide an element displayed as display:table-cell . I've boiled down the problematic code to this fiddle , in which .hidden {display:none;} works to hide a control div but fails to hide the display:table-cell div . How can I apply display:none to a display:table-cell div ?

Answer 1

The reason that your code didn't work is because of the rule of specificity. Read this article for details:

http://css-tricks.com/specifics-on-css-specificity/

This can be quite confusing, but I'll explain this: .table div {display:table-row;} has precedence over .hidden {display:none;} because styles have precedence over classes. The reason that this works: .table div div.hidden{display:none;} is because this uses styles AND classes, making IT have the higher precedence.

Basically, whatever selecters are the most specific will have their rules applied.

Here's how the order works:

I hope you have at least some understanding now . . .

Let me know if you need additional help.

Answer 2

尝试将其添加到您的CSS代码中：

.table div div.hidden{display:none;}