Question

我正在尝试将<p>中的文字颜色更改为灰色。我认为做<p class="gray">content</p>和p.gray { color: #333333; }这样的事情会起作用，但它没有做任何事情。颜色保持黑色。请帮忙吗？

编辑包含完整代码

HTML：

<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>TITLE</title>

<link rel="stylesheet" type="text/css" href="c/main.css?90" />

</head>
<body>
<div id="wrapper">
  <div id="divider">
  <h1 class="logo5">NAME</h1>
  <ul class="underlinemenu">
    <li><a href="index.html">HOME</a></li> 
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="subscribe.html">SUBSCRIBE</a></li>
    <li><a href="faq.html">FAQ</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    <li><a href="login.html">LOGIN</a></li>
  </ul>
  </div> <!-- end divider -->

  <div id="divider">
  <div class="article">
    <h2 class="header">HEADER</h2>
    <div class="content">
      <p class="gray">CONTENT</p>
      <p>CONTENT</p>
    </div>
  </div>
  </div> <!-- end divider -->

  <div id="divider">
  <div class="article">
    <h2 class="header">HEADER</h2>
    <div class="content">
      <p>CONTENT</p>
      <p>CONTENT</p>
    </div>
  </div>
  </div> <!-- end divider -->

  <div id="divider">
  <div class="article">
    <h2 class="header">HEADER</h2>
    <div class="content">
      <p>CONTENT</p>
    </div>
  </div>
  </div> <!-- end divider -->

  <div id="footer">
    <p class="copyright">COPYRIGHT</p>
  </div>
</div> <!-- end wrapper -->
</body>
</html>

CSS：

/*
    Name: Smashing HTML5
    Date: July 2009
    Description: Sample layout for HTML5 and CSS3 goodness.
    Version: 1.0
    Author: Enrique Ramírez
    Autor URI: http://enrique-ramirez.com
*/

/* Imports */
@import url("reset.css");
@import url("global-forms.css");

/***** Global *****/
/* Body */
    body {
        background: #FFFFFF;
        color: #000305;
        font-size: 87.5%; /* Base font size: 14px */
        font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        line-height: 1.429;
        margin: 0;
        padding: 0;
        text-align: left;
    }

/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: .8em;
}

/* Anchors */
/*a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
    color: #C74350;
    padding: 0 1px;
    text-decoration: underline;
}
a:hover, a:active {
    background-color: #C74350;
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 1px #333;
}*/

/* Paragraphs */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}

strong, b {font-weight: bold;}
em, i {font-style: italic;}

::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}

/* Lists */
ul {
    list-style: outside disc;
    margin: 1em 0 1.5em 1.5em;
}

ol {
    list-style: outside decimal;
    margin: 1em 0 1.5em 1.5em;
}

dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}

/* Quotes */
blockquote {font-style: italic;}
cite {}

q {}

/* Tables */
table {margin: .5em auto 1.5em auto; width: 98%;}

    /* Thead */
    thead th {padding: .5em .4em; text-align: left;}
    thead td {}

    /* Tbody */
    tbody td {padding: .5em .4em;}
    tbody th {}

    tbody .alt td {}
    tbody .alt th {}

    /* Tfoot */
    tfoot th {}
    tfoot td {}


/* LAYOUT */
/* ----------------------------------------- */

div#wrapper {
    margin: 0 auto;
    width: 936px;
}

div#divider {
    border-bottom: 1px dotted #c5c5c5;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-family: Delicious;
font-weight: bold;
width: 100%;
}

ul.underlinemenu {
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: right; //set value to "left", "center", or "right"*/
}

ul.underlinemenu li{
display: inline;
}

ul.underlinemenu li a{
color: #FF0080;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 1px dotted; /*bottom border is 3px*/
}

ul.underlinemenu li a:hover, ul.underlinemenu li a.selected{
color: #009ee8;
border-bottom-color: #009ee8;
}

p.copyright a{
color: #FF0080;
text-decoration: none;
}

p.copyright a:hover{
color: #009ee8;
}

/* embedded fonts */

@font-face {
font-family: Delicious;
src: url(fonts/Delicious-Heavy.otf)
}

.header {
font-family: Delicious;
}

.logo5 {
font-family: Delicious;
}

p.gray {
color: #333333;
}

我知道这是一个乱七八糟的混乱，对不起。我正在学习。

Answer 1

应该可以正常工作。尝试更轻的颜色＃666。

Answer 2

这就是像Firebug或Chrome的开发者工具这样的工具派上用场的地方。最有可能的是，你的CSS文件中的CSS稍后会覆盖这种风格，或者你可能有一些Javascript正在这样做。没有好的网络调试器就很难说清楚。

如果你在Firefox上使用Firebug，你可以打开HTML视图并选择你的元素，它会显示为什么该元素的样式。从那里，你可以消除这个问题。

编辑：它工作正常。说真的 - ＃333333是一种非常暗的颜色，几乎与白色背景上的黑色无法区分。

Answer 3

QUICK FIX：在您的css文件中使用'！important'。除非您在第一时间使用它，否则这将覆盖您所拥有的冲突CSS。

p.gray { color: #333333 !important; }

REAL FIX：上面提到过。使用firebug（FireFox插件）并检查元素以查看CSS对相关元素的影响。

Answer 4

在父元素中使用id和类有时会以混乱的方式优先使用。要查看这是否是问题，请非常，非常具体并尝试：

#wrapper #divider .article .content p.gray{
color:red;
}

明亮的颜色适合测试。如果它现在有效，你应该阅读一下id和类如何在冲突时互相覆盖。

我查看了这篇文章，这似乎是一个不错的开始：http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Answer 5

CSS文件中是否存在拼写错误导致浏览器忽略您的p.gray定义？

尝试将p.gray CSS放在文件中，例如在* p：last-child CSS之后，看看是否会产生影响。

Answer 6

你需要确保你的p.grey在你的css代码中正常的p {}之前

HTML类不起作用？

6 个答案: