Question

我使用div制作了一个按钮。我试图使文本变白，但样式表现得很奇怪。

这是CSS部分：

.button a
{
    text-align:center;
    display:block;
    background-color: #FF0000;
    height:40px;
    line-height:40px;
    color:#FFFFFF;
    text-decoration:none;
}

.button  :hover
{
    background-color: #000000;  
}

可以在此处查看该页面：http://www.clccomputing.net/comf413/01/menu.html

如您所见，按钮上的文字不是白色。

奇怪的是，如果我将类型a:link，a:visited添加到CSS，则标题布局会折叠，并且样式会应用于右侧边栏中的TripAdvisor小部件，如下所示：

Image link

HTML直到按钮：

<body>

<div id="wrapper">

    <header>
            <a href="index.html"><img src="images/logo.png" alt="Red 16 Cafe logo"/></a>
    </header>

    <nav>
        <ul>
            <li><a href="menu.html">Menu</a></li><li><a href="specials.html">Specials</a></li><li><a href="map.html">Map</a></li><li><a href="reviews.html">Reviews</a></li>
        </ul>
    </nav>


    <article>
        <div id="articletext">
            <a name="top"><h1>Our Menu</h1></a>
            <br>
            <div class="button">
                <a href="Red16MenuFeb2014.pdf">Download .PDF for printing</a>
            </div>

Answer 1

下面的css代码正在推翻color:#FFFFFF;

在档案style.css 第138行

#articletext a, a:link, a:visited {
    color: #000000;                    /* Css line 138
}

您可以删除该代码并使用此代码（<h1> 黑色）。

#articletext h1 {
        color: #000000;               
}

CSS无法更改div类中的文本颜色

1 个答案: