How to define font-size different divs - html

Question

In my project, I have three divs.
"upBtDiv and ulfDiv" are in attFile div.
The font-size in upBtDiv is 16px, and it works successfully.But the font-size of 10px in ulfDiv works fail.The font-size in ulfDiv is remain 16px.
When i define .attFile{margin-left:15%;margin-top:5%;font-szie:10px}, and it works fine.But the font-size of "upBtDiv and ulfDiv" are both 10px.
Here is my css code:
.attFile {
margin-left:15%;
margin-top:5%
}
.upBtDiv {
position:relative;
overflow:hidden;
display:inline-block;
display:inline;font-size:16px
}
.upBtDiv label { cursor:pointer }
.upBtDiv input {
position:absolute;
top:0;
right:0;
margin:0;
border:solid transparent;
opacity: 0;
filter:alpha(opacity=0);
cursor:pointer;
width:66%
}
.ulfDiv {
height:10px;
line-height:22px;
margin:10px 0;
font-size:10px
}
.ulfDiv .delimg,
.dwlimg {
color:#090;
cursor:pointer;
display:none
}
.ulfDiv:hover .delimg {
display: inline-block;
}
.ulfDiv:hover .dwlimg {
display: inline-block;
}
.delimg:hover { color:blue; }
.dwlimg:hover { color:blue; }
<div class="attFile" id="attFileId">
<div class="upBtDiv">
<label style="color:green">attfile:</label>
<input type="file" id="fulId" name="mypic">
</div>
<div class="ulfDiv" id="ulfId1">
<b class='dataname'>30k</b>
<span class='delimg' rel='" + data.pic + "'>delete</span>
<a class='dwlimg' href='files/" + data.pic + "' target='_blank'>add</a>
</div>
</div>
It seems nothing wrong in my code.I suppose the overflow:hidden attribute of upBtDiv is the reason.But i have no idea about it. Who can help me ?

Answer 1

.attFile > .upBtDiv{
font-size: 28px;
}
.attFile > .ulfDiv{
font-size: 23px;
}
<div class="attFile" id="attFileId">
<div class="upBtDiv" >
<label style="color:green">attfile:</label> <input type="file" id="fulId" name="mypic">
</div>
<div class="ulfDiv" id="ulfId1">
<b class='dataname' >30k</b>
<span class='delimg' rel='"+data.pic+"'>delete</span>
<a class='dwlimg' href='files/"+data.pic+"' target='_blank'>add</a>
</div>
</div>