Question

我正在努力加快CSS的速度。我有一个按钮样式，我需要在几页内重复。我在下面的html文件中创建了一个名为bigbutton的类。我也在其他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;
}

Answer 1

嗯，我得到了它的工作。我更改了这一行：

<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选择器 - 没有到达我的元素

1 个答案: