无法搁置类以WordPress style.css响应CSS

Question

I am creating my website on WordPress and am trying with no success to style the sidebar. The HTML shows <aside class="sidebar sidebar-primary widget-area" [etc.]> .

For the life of me, I cannot get a border radius on this class. I've tried using

.sidebar .sidebar-primary .widget-area { border-radius: 5px; } 

with no avail. I've tried nesting it under its parent div but that didn't work either.

I got the main content area to respond, but this one seems to be a bigger pain. Is there something I'm missing for aside classes? What am I doing wrong?

Answer 1

Solution:

Since the HTML code has multiple classes, you can target it with Multiple class selector :

.sidebar.sidebar-primary.widget-area {
   border-radius: 5px;
}

Problem:

Remember that you were trying to use Descendant selector

Your code .sidebar .sidebar-primary .widget-area would have worked for:

<aside class="sidebar">
   <div class="sidebar-primary"> 
      <div class="widget-area"> 
         // Contents of widget area
      </div>
   </div>
</aside>

Edit:

After you posted your live demo, it seems you wanted to add border-radius to each individual widget. My suggested solution will not work again for that. It targets the whole widget area. Below is the CSS rule you are looking for:

.sidebar .widget { border-radius: 5px; }

Answer 2

.sidebar .sidebar-primary .widget-area { border-radius: 5px; } 

means you are are targeting a class of .widget-area that exists under .sidebar-primary that exists under .sidebar. In order to achieve the effect you actually want

.sidebar.sidebar-primary.widget-area { broder-radius: 5px; } 

which means you are targeting a class of sidebar that also has classes of .sidebar-primary and widget-area

Answer 3

.sidebar.sidebar-primary.widget-area { border-radius: 5px; } 

...is what you want (note the lack of spaces between the class selectors).

Depending on your specificity requirements, you might only need:

.sidebar-primary.widget-area { border-radius: 5px; }

Or:

.widget-area { border-radius: 5px; }

You only nest selectors when your HTML is nested. Your HTML isn't nested, you just have multiple classes on the same DOM node :)

Nested HTML would look like:

<aside class="sidebar">
    <div class="sidebar-primary">
        <div class="widget-area">
        ...
        </div>
    </div>
</aside>

Answer 4

In addition to above answers, you can target it like

aside.sidebar-primary {   // or aside.widget-area depending on your needs
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;
}

The first four lines are vendor-prefixed properties offered by rendering engines (-webkit for Chrome, Safari; -moz for Firefox, -o for Opera, -ms for Internet Explorer) to avoid cross-browser inconsistencies.