0

我正在尝试跟上 CSS 的速度。我有一个按钮样式，我需要在很多页中重复。我创建了一个名为bigbutton我在以下 html 文件中使用的类。我也在其他 html 页面中使用相同的类。

您还将看到我的 css 文件，我在其中定义了此按钮的外观。我遇到的问题是，当我定义 css 文件时，.bigbutton这些设置无效。如果我定义 css 文件，#big_button_container .bigbutton那么一切正常。不幸的是，我不能这样做，因为在其他 html 文件中，这个类不一定会包装在这个big_button_containerdiv 中。

所以，我的问题是如何编写 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;
}
4

1 回答 1

0

Well, I got it to work. I changed this line:

<div id="big_button_container">

to 

<div class="big_button_container">

and then moved the css for this container into this same 'bigbuttons.css' file. So, now my css file looks like this:

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;
}

I had tried previously to make big_button_container a class, so I really don't know why this works. But it works not only in this file, but also in other html files that use this same button styling. I never like resolving things like this by happenstance, but at least it's solved. If anyone can tell me why this works when it didn't previously, I'd love to hear it.

Thanks to everyone, and sorry to have bothered you. I appreciate your help!

于 2013-06-30T04:09:55.647 回答