CSS选择器将边框应用于h4

Question

On http://adasportsandrackets.com/wordpress , I am trying to add CSS to add a border under the h4 heading "Best Sellers." It's not working and it's not a caching issue as I've tried in the major browsers after deleting cache.

Here is the HTML:

<div class="wpb_text_column wpb_content_element  best-sellers">
<div class="wpb_wrapper">
<h4>Best Sellers</h4> 

And here is my CSS:

.best-sellers h4 {

border-bottom: 1px solid #eee;
padding: 7px 0px;

}

I also tried:

.best-sellers {

border-bottom: 1px solid #eee;
padding: 7px 0px;

}

Answer 1

This worked for me:

.page-template-template-home-default-php .wpb_wrapper h4 {
    border-bottom: 5px solid #999;
}

Or try:

.best-sellers h4 {border-bottom: 5px solid #999;}

Answer 2

Try:

.wpb_wrapper h4 { border-bottom: 1px solid #eeeeee;}

Or try adding a class to h4 eg

<h4 class="borderh4">Lol</h4>

.borderh4 {border-bottom: 1px solid #eeeeee;}

Answer 3

Best to select based on it's parent div class:

.wpb_wrapper h4 {
  border-bottom: 1px solid #eee;
  padding: 7px 0px;
}

As the previous answer stated, if your parent div has multiple classes, you usually need to select both for it to grab the right element:

.wpb_wrapper.another_class h4 {}