我的h2课=＆＃34;标题后＆＃34;文字是蓝色的，应该是黑色的。请有人帮忙吗？
此外，.cat-title应该位于图像的顶部，并且应该具有蓝色背景。在我做出一些改变之前似乎有效。
/* General ------------------------- */
html {
height: 100%;
background-image: url('../img/bgimage.jpg');
background-size: cover;
background-attachment: fixed;
}
body {
margin: 0 auto;
font: 1em/1.5"Helvetica Neue", Helvetica, Arial, sans-serif;
/*background-color: #d1c5b7;*/
width: 1225px;
background-color: white;
}
#wrapper {
/*max-width: 940px;*/
margin: 0 auto;
/*padding: 0 5%;*/
}
a {
text-decoration: none;
}
/* Heading ------------------------- */
header {
/*padding-top: 10px;*/
height: 140px;
width: 100%;
background-color: #856941;
}
h1 {
font-size: 5rem;
color: #fff;
margin: 0;
text-align: center;
text-shadow: 0 2px 2px black;
}
/* Navigation ------------------------- */
nav {
background-color: #000;
text-align: center;
padding: 0;
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
line-height: 43px;
font-weight: 800;
padding: 15px 10px;
color: white;
}
/* Articles ----------------------- */
.row {
width: 1228px;
height: 1983px;
padding-top: 25px;
margin-right: -25px;
margin-left: -25px;
}
.main-content {
width: 702px;
height: 2129px;
float: left;
padding-left: 25px;
padding-right: 25px;
}
section {
margin: 20px;
}
.row-listing {
width: 752;
height: 2090;
margin-left: -25px;
margin-right: -25px;
}
.column-half {
width: 326px;
height: 310px;
float: left;
padding-left: 25px;
padding-right: 25px;
}
. .cat-title {
position: absolute;
top: 0;
background: #487be4;
line-height: 25px;
margin-left: 7px;
color: #fff;
font-size: 12px;
text-transform: uppercase;
padding: 0 10px;
}
img {
width: 326px;
height: 172px;
}
.meta {
position: relative;
margin-top: -12px;
width: 312px;
height: 25px;
padding-left: 14px;
background: #f2f2f2;
line-height: 25px;
font-size: 11px;
color: #a6a6a6;
text-transform: uppercase;
}
.post-title {
color: black;
font-size: 14px;
line-height: 1.3;
padding-left: 14px;
margin: 7px 0;
}
/* Sidebar ------------------------ */
.sidebar {
width: 376px;
height: 1983px;
border-left: 1px solid #d9d9d9;
float: left;
margin: 20px;
}
/* Footer ------------------------- */
footer {
font-size: 1em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
background-color: #735d41;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Live Wire | Beta</title>
<!-- <link rel="stylesheet" href="css/main.css"> -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Live Wire</h1>
</a>
<nav>
<ul>
<li><a href="index.html">Home</a>
</li>
<li><a href="tech.html">Tech</a>
</li>
<li><a href="entertainment.html">Entertainment</a>
</li>
<li><a href="science.html">Science</a>
</li>
<li><a href="geek.html">Geek</a>
</li>
<li><a href="howto.html">How To</a>
</li>
<li><a href="more.html">More</a>
</li>
<li><a href="news.html">News</a>
</li>
</ul>
<nav>
</header>
<div #wrapper>
<div class="row">
<section class="main-content">
<div class="row-listing">
<div class="column-half">
<article class="Chrome Ram">
<span class="cat-title">Technology</span>
<a href="articles/article001.html">
<img src="img/chrome.jpg" alt="Chrome">
</a>
<div class="meta">
<time>1 October, 2015</time>
</div>
<h2 class="post-title">
<a href="articles/article001.htm">How to Stop Chrome from Eating your Ram</a>
</h2>
<div class="excerpt">
</div>
</article>
</div>
<!-- END OF COLUMN HALF -->
<div class="column-half">
<article class="CSS Boxes">
<span class="cat-title">
Technology
</span>
<a href="articles/article002.html">
<img src="img/css_box_model.gif" alt="CSS Box Model">
</a>
<div class="meta">
<time>1 October, 2015</time>
</div>
<h2 class="post-title">
<a href="articles/article002.htm">CSS Boxes</a>
</h2>
<div class="excerpt">
</div>
</article>
</div>
<!-- END OF COLUMN HALF -->
<div class="column-half">
<article class="CSS Layout">
<span class="cat-title">
Technology
</span>
<a href="articles/article003.html">
<img src="img/cssImage.jpg" alt="CSS 3 Image">
</a>
<div class="meta">
</div>
<h2 class="post-title">
<a href="articles/article003.htm">CSS Layout</a>
</h2>
<div class="excerpt">
</div>
</article>
</div>
<!-- END OF COLUMN HALF -->
<div class="column-half">
<article class="HTML and CSS Book">
<span class="cat-title">
Technology
</span>
<a href="articles/article004.html">
<img src="img/book.jpg" alt="Book Image">
</a>
<div class="meta">
</div>
<h2 class="post-title">
<a href="articles/article004.htm">The Best Book for HTML & CSS Beginners</a>
</h2>
<div class="excerpt">
</div>
</article>
</div>
<!-- END OF COLUMN HALF -->
</div>
<!-- END OF ROW LISTING -->
</section>
<aside class="sidebar">
</aside>
</div>
<!-- end of row -->
</div>
<!-- end of wrapper -->
<footer>
<p>© 2015 Sean Blythe</p>
</footer>
</body>
</html>
答案 0 :(得分：3)
它是蓝色的，因为它是a标签。尝试定位这样的颜色：
.post-title a {
color: black;
}
我不确定你的第二个问题，但你的css中还有一个.。应该是.cat-title而不是..cat-title
答案 1 :(得分：1)
执行此操作a默认情况下为蓝色
h2.post-title a{
color: #000;
}