将CSS导航到div元素中的元素

Question

I need to navigate my css to an element, which is an element(div). Like this:

.element element {
  color: rgba(6, 132, 134, 255);
} 

How to do that? Info: element > .element didn't work, and .element element also didn't work.
I am trying to get the toolbar element. (here is the element in html):

<div class="main" id="main">
    <div class="toolbar">

    </div>
  </div>  

And I need to get the toolbar element in main, because there are more toolbars in other divs?

Thanks in advance for your help.

Answer 1

Based on your HTML, your CSS should look like this:

.toolbar {
  color:rgba(6, 132, 134, 255);
}

But since you have other elements with the class toolbar , you can use specificity so that only the element with class toolbar within the element with the id main will use those styles:

 #main .toolbar { color:rgba(6, 132, 134, 255); } 

 <div class="main" id="main"> <div class="toolbar"> This is some text. </div> </div> 

Answer 2

. is used to select elements with a specific class, and # is used to select elements with a specific id. In your case to select the .toolbar nested within #main you would need:

 #main .toolbar { color: rgba(6, 132, 134, 255); } 

Answer 3

That's pretty simple:

#main div.toolbar {
color: red;
}

This targets the DIV with the class TOOLBAR within an element with the id MAIN :)

Answer 4

您的问题有点抽象，但是基于您添加的代码，我认为您正在尝试定位div“工具栏”，可以使用以下任何一种方法来完成此操作（以最佳顺序排列） ：

1. #main .toolbar { ... }
2. .main .toolbar { ... }
3. #main div { ... }
4. .main div { ... }

Answer 5

you can select in many ways, but if you want to navigate from one to another you should use on CSS (to access the toolbar)

.main div {
  color: rgba(6, 132, 134, 255);
} 

or you can simply use the css class selector to select the element directly

.toolbar {
    color: rgba(6, 132, 134, 255);
}

but this will not display anything, in order to see any content, you have to use the height property, or insert some content