CSS stylesheets being override even it is in last sequence

Question

Here is some code of my main jsp file:

<link rel="stylesheet" type="text/css" href="<c:url value='/styles/bootstrap.min'/>,bootstrap-switch.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/styles/main.css'/>"/>

The main.css is at the line after bootstrap css , so usually, main.css will override the bootstrap css . (correct me if I am wrong.)

Inside main.css , I have create 1 class as follow:

.testjx{
    background-color: yellow;
    vertical-align:middle;
}

And here is my sub jsp file:

<td class="testjx">
     1000000
</td>

When I view the page in browser, I found that vertical-align:middle is override by bootstrap css file, as follow screen shot:

I try my best to find out the root cause, but fail. Kindly advise.

Answer 1

You must do like this:

table tr td.testjx, table tfoot tr td.testjx, table thead tr td.testjx, table tbody tr td.testjx{
    vertical-align:middle;
}

You need to inspect where the class is to short the css code...check if is on the tfoot, thead or tbody or general

DEMO HERE

Answer 2

I get around this by adding !important to the relevant CSS ie font-weight:bold !important; and this stops it being overridden regardless of which file it's in. Simples.