我正在努力跟上 CSS 的步伐。我有一个按钮样式，需要在好几页中重复使用。我创建了一个名为 bigbutton 的类，我在以下 html 文件中使用它。我还在其他 html 页面中使用了相同的类。
您还会看到我的 css 文件，我在其中定义了此按钮的外观。我遇到的问题是，当我将 css 文件定义为 .bigbutton 时，这些设置无效。如果我用 #big_button_container .bigbutton 定义 css 文件，那么一切都会完美无缺。不幸的是，我不能这样做，因为在其他 html 文件中，这个类不一定包含在这个 big_button_container div 中。
所以，我的问题是如何编写 css 选择器，以便它对这个 bigbutton 类产生预期的效果？谢谢!
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="styles/mystyles.css" media="screen" />
<link rel="stylesheet" type="text/css" href="styles/bigbuttons.css" media="screen" />
<style media="screen" type="text/css">
#big_button_container{
margin-left:85px;
width:809px;
padding:14px;
}
</style>
</head>
<body>
<div id="frame">
<div id="page">
<img id="mainpic" src="images/banner.png" height="390" width="982">
<div id="big_button_container">
<table>
<tr>
<td>
<form action="coaches.html">
<input type="submit" value="COACHES" class="bigbutton">
</form>
</td>
<td>
<input type="button" value="GROUPS" class="bigbutton" onclick="()"</td>
<td><input type="button" value="WORKOUTS" class="bigbutton" onclick="()"</td>
<td><input type="button" value="ATHLETES" class="bigbutton" onclick="()"</td>
</tr>
<tr>
<td><input type="button" value="PACE GROUPS" class="bigbutton" onclick="()"</td>
<td><input type="button" value="USER TYPES" class="bigbutton" onclick="()"</td>
<td><input type="button" value="WORKOUT TYPES" class="bigbutton" onclick="()"</td>
</tr>
</div>
</div>
</div>
</body>
</html>
CSS
//#big_button_container .bigbutton{ <--this works, but only for this html file
.bigbutton{
clear:both;
margin-right:3px;
margin-top:3px;
border-style:none;
width:200px;
height:125px;
background:#c1d72e;
text-align:center;
line-height:50px;
color:#444444;
font-size:16px;
font-weight:bold;
}
最佳答案
好吧，我让它工作了。我更改了这一行:
<div id="big_button_container">
到
<div class="big_button_container">
然后将此容器的 css 移动到同一个“bigbuttons.css”文件中。所以，现在我的 css 文件看起来像这样:
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.big_button_container{
margin-left:85px;
width:809px;
padding:14px;
}
.bigbutton{
clear:both;
margin-right:3px;
margin-top:3px;
border-style:none;
width:200px;
height:125px;
background:#c1d72e;
text-align:center;
line-height:50px;
color:#444444;
font-size:16px;
font-weight:bold;
}
我之前曾尝试将 big_button_container 设为一个类，所以我真的不知道为什么会这样。但它不仅适用于此文件，而且适用于使用相同按钮样式的其他 html 文件。我从来不喜欢偶然解决这样的事情，但至少它已经解决了。如果有人能告诉我为什么它以前行不通，我很想听听。
谢谢大家，很抱歉打扰了大家。感谢您的帮助!
关于CSS 选择器 - 未到达我的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17386874/