CSS不适用于我的div

Question

I have a div that I really need to apply my css attributes to. The page is structured like this:

<div class="form-horizontal">
    <div class="form-group">
         <div class="newFormRightContent">

I have a .form-group in my stylesheet and that comes out fine on the page, but my .newFormRightContent styles never get assigned. I am using chrome inspect element and can see that at newFormRightContent level, the styles are inherited from form-group and from the user-agent ss.

I have tried various combo's of selectors in my css:

div.form-group.newFormRightContent {

.form-group.newFormRightContent {

.newFormRightContent {

None seem to work - can someone please educate me on my failings here please!!

Many thanks

Answer 1

You have to leave space between .form-group and .newFormRightContent

.form-group .newFormRightContent{

and try to set your styles !important

Answer 2

Try this:

.form-horizontal > .form-group > .newFormRightContent

This will make sure only nested situation gets the design and no other situations get modified. Not using the child > selector will result in unnecessary design override in some other places where the given order is not maintained.

Answer 3

You need to put commas between each class/id/element.

div, .form-group, .newFormRightContent {

}
.form-group, .newFormRightContent {

}

.newFormRightContent {

}

Answer 4

Maybe .form-group div has some style marked with !important in css. Than you should try also to make your style important for your child div. eg

.newFormRightContent {
 background-color:#cecece!important;
}

Is this html code block inside IFrame ?