Html CSS嵌套未达到预期效果_Html_Css_Button_Nested

Html CSS嵌套未达到预期效果

html css button

Html CSS嵌套未达到预期效果,html,css,button,nested,Html,Css,Button,Nested,我不熟悉HTML/CSS，所以这可能是一个愚蠢的/基本的问题，但我无法找到为什么会发生这种情况的答案：我正在制作一个超级基本的网页，其中导航栏中的按钮可以更改内容部分中显示的图像。我只想更改按钮的外观，但似乎无法做到： HTML文档： <!DOCTYPE html> <html> <head> <title>homepage</title> <link rel="stylesheet" type="text/cs

我不熟悉HTML/CSS，所以这可能是一个愚蠢的/基本的问题，但我无法找到为什么会发生这种情况的答案：

我正在制作一个超级基本的网页，其中导航栏中的按钮可以更改内容部分中显示的图像。我只想更改按钮的外观，但似乎无法做到：

HTML文档：

<!DOCTYPE html>
<html>
<head>
    <title>homepage</title>
    <link rel="stylesheet" type="text/css" href="homestyle.css">
    <script src='navfunc.js'></script>
</head>
<body>

<!-- WRAPPER DIV -->
<div id='wrapper'>

<!-- HEADER DIV -->
<div class = 'header'>
<h1> Price History and Stock Data </h1>

</div>

<!-- SIDEBAR/NAV DIV -->
<div class = 'sidebar'>
<nav>
    <ul>
    <li> <button type="button" onclick="navfunc('AMBA')"> AMBA </button> </li>
    <li> <button type="button" onclick="navfunc('APH')"> APH </button> </li>
    <li> <button type="button" onclick="navfunc('ASX')"> ASX </button> </li>
    <li> <button type="button" onclick="navfunc('B')"> B </button> </li>
    <li> <button type="button" onclick="navfunc('BDS')"> BDSI </button> </li>
    <li> <button type="button" onclick="navfunc('CNC')"> CNC </button> </li>
    <li> <button type="button" onclick="navfunc('CNK')"> CNK </button> </li>
    <li> <button type="button" onclick="navfunc('COLB')"> COLB </button> </li>
    <li> <button type="button" onclick="navfunc('EWBC')"> EWBC </button> </li>
    <li> <button type="button" onclick="navfunc('FB')"> FB </button> </li>
    <li> <button type="button" onclick="navfunc('GPRO')"> GPRO </button> </li>
    <li> <button type="button" onclick="navfunc('HAIN')"> HAIN </button> </li>
    <li> <button type="button" onclick="navfunc('HEI')"> HEI </button> </li>
    <li> <button type="button" onclick="navfunc('LCI')"> LCI </button> </li>
    <li> <button type="button" onclick="navfunc('MANU')"> MANU </button> </li>
    <li> <button type="button" onclick="navfunc('NCLH')"> NCLH </button> </li>
    <li> <button type="button" onclick="navfunc('RCL')"> RCL </button> </li>
    <li> <button type="button" onclick="navfunc('TSN')"> TSN </button> </li>
    <li> <button type="button" onclick="navfunc('TSO')"> TSO </button> </li>
    <li> <button type="button" onclick="navfunc('WWD')"> WWD </button> </li>
    </ul>
</nav>

</div>

<!-- CONTENT DIV -->
<div class = 'content'>
<img id='hmap' src = 'AMBA_heatmap.png' alt='AMBA', style="width: 880px; height: 660px;">

</div>

<!-- FOOTER DIV -->
<div class = 'footer'>

</div>

</div>
</body>
</html>

这些文档中的注意力中心就是导航栏部分，我在这里写道：

div.sidebar button {
    background-color: '#4CAF50'; /* Green */
    border: none;
    color: white;
    width: 95px;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

但是按钮仍然采用默认的按钮值。我把它弄得有点乱，在浏览器中有一些样式需要更改，但如果我再次更改或重新更改，它们就会停止工作

抱歉，如果这有点模糊，但我的印象是，有一些基本的东西，我错过了，似乎无法找出它是什么

谢谢你的帮助/建议

nav.sidebar按钮

将使用类侧栏选择nav元素的所有后代按钮元素。您需要

div.sidebar>nav按钮

。这将选择所有按钮，这些按钮是所有导航元素的后代，这些导航元素是带有类侧栏的div的子元素

/*包装器-------------------------------------------*/
#包装纸{
左边距：自动；
右边距：自动；
宽度：1280px；
}
/*页眉-------------------------------------------*/
分区标题{
背景色：#87CEFA；
字体系列：“投石机MS”，Verdana，无衬线；
文字装饰：下划线；
文本对齐：居中；
字体大小：150%；
颜色：#286F02；
填充：25px；
边际：0px；
底部边框：2件纯黑；
}
/*侧边栏-------------------------------------------*/
分区侧栏{
浮动：左；
高度：1024px；
宽度：225px；
右边框：2倍纯黑；
底部边框：2件纯黑；
边框顶部：2件纯黑；
填充物：5px；
保证金：2倍；
背景色：#0F4FAF；/*蓝色*/
}
分区侧栏{
列表样式类型：无；
利润上限：10px
}
部门侧栏ul li{
利润率：10px；
字体大小：22px；
}
div.sidebar>导航按钮{
背景色：“#4CAF50”；/*绿色*/
边界：无；
颜色：白色；
宽度：95px；
填充：10px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
/*内容-------------------------------------------*/
部门内容{
宽度：910px；
高度：1024px；
背景色：#C0；
边框：2px实心#0f0f；
边界塌陷：塌陷；
浮动：左；
保证金：1px；
填充物：5px；
}
/*页脚------------------------------------------------------------------*/
分区页脚{
宽度：100%；
}


价格历史和股票数据


安巴


阿弗


澳大利亚证券交易所


B


BDSI


数控


CNK


马驹


EWBC


食品饮料


GPRO


海因


嗨


LCI


马努


NCLH


RCL


TSN


曹


WWD

nav.sidebar按钮

将使用类侧栏选择nav元素的所有后代按钮元素。您需要

div.sidebar>nav按钮

。这将选择所有按钮，这些按钮是所有导航元素的后代，这些导航元素是带有类侧栏的div的子元素

/*包装器-------------------------------------------*/
#包装纸{
左边距：自动；
右边距：自动；
宽度：1280px；
}
/*页眉-------------------------------------------*/
分区标题{
背景色：#87CEFA；
字体系列：“投石机MS”，Verdana，无衬线；
文字装饰：下划线；
文本对齐：居中；
字体大小：150%；
颜色：#286F02；
填充：25px；
边际：0px；
底部边框：2件纯黑；
}
/*侧边栏-------------------------------------------*/
分区侧栏{
浮动：左；
高度：1024px；
宽度：225px；
右边框：2倍纯黑；
底部边框：2件纯黑；
边框顶部：2件纯黑；
填充物：5px；
保证金：2倍；
背景色：#0F4FAF；/*蓝色*/
}
分区侧栏{
列表样式类型：无；
利润上限：10px
}
部门侧栏ul li{
利润率：10px；
字体大小：22px；
}
div.sidebar>导航按钮{
背景色：“#4CAF50”；/*绿色*/
边界：无；
颜色：白色；
宽度：95px；
填充：10px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
}
/*内容-------------------------------------------*/
部门内容{
宽度：910px；
高度：1024px；
背景色：#C0；
边框：2px实心#0f0f；
边界塌陷：塌陷；
浮动：左；
保证金：1px；
填充物：5px；
}
/*页脚------------------------------------------------------------------*/
分区页脚{
宽度：100%；
}


价格历史和股票数据


安巴


阿弗


澳大利亚证券交易所


B


BDSI


数控
div.sidebar button {
    background-color: '#4CAF50'; /* Green */
    border: none;
    color: white;
    width: 95px;
    padding: 10px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}


.sidebar>nav button {
background-color: '#4CAF50'; /* Green */
border: none;
color: white;
width: 95px;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;