CSS 验证错误 : Same colors for color and background-color in two contexts

Question

我需要帮助来解决验证 CSS。在这里，我在 W3 验证中遇到了 20 个相同的错误。我不明白。如果您能解决此问题，我将不胜感激。

错误:两种上下文中 color 和 background-color 的颜色相同

这是供您审阅的 CSS 代码:

@charset "utf-8";

body {
font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;
    font-weight: normal;
    color: #222222;
    text-align: left;
    margin: 0px;
    padding: 0px;

}
a {
 text-decoration:none;
 color:#222222
}
a:hover {
color:#29a1d6;

}
span.redclr {
color:#FF0000
}
.clr-blue {
 color:#29a1d6
}
.clr-green {
color:#85be2e
}
.g-font-18px {
font-family:Georgia, "Times New Roman", Times, serif;
 font-size:18px;
 font-style:italic
}
.img-brd-5px {
border:5px solid #f1f1f1;
 padding:10px
}
p {
text-align:left;
 margin:0px;
 padding:0px 0px 8px 0px;
 line-height:140%
}
p.pdg-btm-2px {
padding-bottom:2px
}
.textfield {
border:1px solid #cfe8f4;
 padding:3px 5px;
 text-align:left;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px
}
.textfield:hover {
border:1px solid #abd6eb;
 background-color:#f2faff
}
.captcha {
border:1px solid #cfe8f4;
 padding:3px 5px;
 text-align:center;
 color:#29a1d6;
 font-family:Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 width:119px;
 margin-left:5px
}
.captcha:hover {
border:1px solid #abd6eb;
 background-color:#f2faff
}
.button-bg {
background:url(../images/btn-bg.jpg) repeat-x center top;
 padding:0px;
 margin:0px;
 color:#FFFFFF;
 height:28px;
 font-size:14px;
 font-weight:bold;
 cursor:pointer;
 border:0px solid #5fa000;

}
.button-bg:hover {
background:url(../images/btn-bg-hover.jpg) repeat-x center top;
  border:0px solid #198dbf
}
.header1-brd-btm {
 font-size:20px;
 font-weight:bold;
 color:#29a1d6;
 text-align:left;
 margin-bottom:10px;
 padding-bottom:5px;
 border-bottom:1px solid #cfe8f4
}
.green-header1-brd-btm {
padding:0px 0px 5px 0px;
 font-size:18px;
 color:#85be2e;
 background:none;
 font-weight:normal;
 border-bottom:1px solid #cfe8f4;
 margin-bottom:10px
}

.header-1 {
font-size:33px;
 color:#ffffff;
 padding:10px 0px 0px 0px;
 text-shadow:2px 1px 0px #00648e;

}
.header-2 {
font-size:22px;
 color:#29a1d6;
 padding:0px 0px 5px 0px;
 text-shadow:2px 2px 0px #f1f1f1;
 font-weight:bold;
 border-bottom:1px solid #cfe8f4;
 margin-bottom:10px;

}
.header-3 {
font-size:18px;
 color:#85be2e;
 padding:0px 0px 5px 0px;
 font-weight:bold;
 margin-bottom:10px;

}
.header-3-bg {
font-size:18px;
 color:#000000;
 padding:5px 15px 7px 15px;
 font-weight:bold;
 margin-bottom:10px;
 background-color:#f1f1f1;
 overflow:hidden;
 clear:left;

}

.text18pt {
font-size:18px;
 text-align:left;
 line-height:normal;

}


.top-bg {
background:url(../images/top-gradiant-bg.jpg)  repeat-x center top;
 height:86px;
 width:100%;

}
.main {
width:950px;
 margin:0px auto;
 overflow:hidden;
 border:0px solid #000000;

}
.logo {
 width:300px;
 overflow:hidden;
 border:0px solid #000000;
 margin-top:15px;
 float:left
}
.header-right {
width:645px;
 float:right;
 border:0px solid #000000;

}
.toplink {
margin:10px 0px 0px 0px;
 padding:0px;
 text-align:right;
 width:645px;
 overflow:hidden
}
.toplink ul {
margin:0px;
 padding:0px;

}
.toplink ul li {
margin:0px;
 padding:5px;
 list-style:none;
 float:right;
 font-size:14px;
 font-weight:bold
}
.toplink ul li a {
color:#222222
}
.toplink ul li a:hover {
text-decoration:none;
 color:#29a1d6
}

.top-navigation {
margin:20px 0px 0px 0px;
 padding:0px;
 border:0px solid #000000;
 clear:both;
 float:right
}
.top-navigation ul {
margin:0px;
 padding:0px;

}
.top-navigation ul li {
margin:0px;
 padding:0px 15px;
 list-style:none;
 float:right;
 font-size:15px;
 font-weight:bold
}
.top-navigation ul li a:hover {
text-decoration:none
}

.main-banner {
width:100%;
 background:url(../images/main-banner-bg123.png) repeat-x;
 margin:2px auto;

}
.middlebar-bg {
background:url(../images/middle-gradiant-bg.jpg) repeat-x center top;
 width:100%;

}

.main3servicesbox {
width:960px;
 margin:0px auto;
 overflow:hidden;

}
.mainservices-box{
background:url(../images/main-box-bg.png) no-repeat left top;
 width:280px;
 height:180px;
 float:left;
 padding:20px 19px 0px 20px;
 cursor:pointer
}
.mainservices-box:hover{
background:url(../images/main-box-bg-hover.png) no-repeat left top;

}
.mainservices-title {
font-size:16px;
 font-weight:bold;
 color:#29a1d6;
 text-align:left;
 border-bottom:1px solid #29a1d6;
 padding-bottom:2px;
 margin-bottom:10px
}
.mainservices-link {
 margin:0px 0px 0px 0px;
 padding:0px;
 overflow:hidden;

}
.mainservices-link ul {
 margin:0px;
 padding:0px;

}
.mainservices-link ul li {
 margin:0px;
 padding:0px 0px 10px 18px;
 list-style:none;
 background: url(../images/bullet-small.gif) no-repeat 0px 4px;
 font-size:13px;
 font-weight:bold
}

.home-content-bg {
background:url(../images/homepage-content-bg.jpg) no-repeat left top;
 width:915px;
 height:257px;
 padding: 20px 10px 0px 25px;
 margin:5px 0px 10px 0px;
 overflow:hidden
}
.capabilities {
padding:0px 0px 0px 0px;
  margin:0px;
 border:0px solid #000000;
 width:205px;
 float:left
}
.capabilities ul {
margin:0px;
 padding:0px;

}
.capabilities ul li {
margin:0px;
 padding:5px 0px 7px 18px;
 list-style:none;
 background:url(../images/bullet.gif) no-repeat 0px 9px;
 border-top:1px solid #cfe8f4;
 font-weight:bold
}
.capabilities ul li.title {
padding-left:0px;
 font-size:18px;
 border:none;
 color:#85be2e;
 background:none;
 font-weight:normal;
 padding-bottom:3px
}
.capabilities ul li a:hover {
text-decoration:none
}

.home-main-content-module {
border:0px solid #000000;
 overflow:hidden;
 float:left;
 margin:0px 0px 0px 45px;
 width:650px
}



.footer {
background-color:#f4f4f4;
 border-top:2px solid #dfdfdf;
 padding-bottom:20px;
 margin-top:10px
}
.footerlink {
margin:10px 70px 0px 0px;
 padding:0px;
 border:0px solid #330000;
 float:left
}
.footerlink ul {
margin:0px;
 padding:0px;

}
.footerlink ul li {
margin:0px;
 padding:0px 0px 4px 0px;
 list-style:none;
 font-size:12px;

}
.footerlink ul li b {
color:#222222
}
.footerlink ul li a {
color:#545454
}
.footerlink ul li a:hover {
text-decoration:none;
 color:#29a1d6
}

.footer-getAquote {
 border:0px solid #000000;
 float:left
}
.socialMedia-icon {
margin:10px 0px 0px 0px;
 padding:0px;
 border:0px solid #000000;
 overflow:hidden
}
.socialMedia-icon ul {
margin:0px 0px;
 padding:0px;

}
.socialMedia-icon ul li {
margin:0px;
 padding:0px 0px 0px 25px;
 list-style:none;
 float:left;

}

.copyrighttext {
width:100%;
 height:23px;
 background-color:#27a1d5;
 color:#FFFFFF;
 font-size:12px;
 padding-top:13px;
 text-align:center
}

/*** services page****/
.page-header-bg {
background: url(../images/page-header-bg.jpg) repeat-x  center top;
 height:63px;
 width:100%;
 margin:2px 0px
}
.breadcrumb-bg {
background-color:#ddf7ff;
 width:100%;
 padding:10px 0px;
 margin-bottom:15px
}
.breadcrumb {
margin:0px;
 padding:0px;
 overflow:hidden;

}
.breadcrumb ul {
margin:0px;
 padding:0px;

}
.breadcrumb ul li {
margin:0px;
 padding:0px 1px;
 list-style:none;
 display:inline;
 font-size:12px;

}
.breadcrumb ul li a:hover {
text-decoration:none
}

.leftbar {
width:225px;
 float:left;

}
.rightbar {
width:700px;
 float:left;
 margin-left:25px
}
* html .rightbar {
width:698px;
 float:left;
 margin-left:25px
}

.left-module {
margin:0px 0px 20px 0px;
 overflow:hidden
}
.leftbar-navigation {
width:225px;
 overflow:hidden;

}
.leftbar-nav-bg-top {
 background:url(../images/leftbar-top-bg.jpg) no-repeat 0px 0px;
 height:20px
}
.leftbar-nav-bg-middle {
 background:url(../images/leftbar-middle-bg.jpg) repeat-y center top 
}
.leftbar-nav-bg-bottom {
 background:url(../images/leftbar-bottom-bg.jpg) no-repeat 0px bottom;
 height:15px;

}
.left-nav {
margin:0px auto;
 padding:0px;
 width:190px
}
.left-nav ul {
margin:0px;
 padding:0px;

}
.left-nav ul li {
margin:0px;
 font-size:12px;
  list-style:none;
  font-weight:bold;
 border-top:1px solid #cfe8f4;

}
.left-nav ul li.title {
 font-size:15px;
 border:none;
 padding-bottom:5px
}
.left-nav ul li a {
display:block;
 cursor:pointer;
 background:url(../images/bullet.gif) no-repeat left 10px;
 padding:6px 0px 7px 20px;

}
.left-nav ul li a:hover {
text-decoration:none;
 background:url(../images/bullet-12px-hover.gif) no-repeat left 9px;

}
.left-nav ul li.sublink {
border-top:0px;
  font-weight:normal;
 line-height:normal;
 font-size:12px
}
.left-nav ul li.sublink a {
padding:0px 0px 4px 20px;
 background-image:none;

}
.left-nav ul li.sublink a:hover {
text-decoration:none;
 background:none
}

.leftbar-optin {
margin:0px 0px 0px 0px;
 padding:0px;
 width:225px;

}
.leftbar-optin ul {
margin:10px 0px 0px 0px;
 padding:0px;

}
.leftbar-optin ul li {
margin:0px;
 padding:0px 0px 3px 0px;
 list-style:none
}
.leftbar-optin ul li .textfield {
 width:213px;

}
.leftbar-optin ul li .textfield-h {
width:213px;
 height:100px
}
.leftbar-optin ul li .textfield122 {
 width:107px;
 margin-left:5px
}
.leftbar-optin ul li .submit-btn {
width:225px;
 text-align:center;

}

.left-testimonials {
margin:0px;
 padding:0px;

}
.left-testimonials ul {
margin:0px;
 padding:0px;

}
.left-testimonials ul li {
margin:0px;
 padding:0px;
 list-style:none;
 line-height:140%
}
.left-testimonials ul li.text {
background:url(../images/quote.jpg) no-repeat 0px 0px;
 padding:2px 15px 5px 0px;
 text-indent:25px;

}
.left-testimonials ul li.boldtext {
color:#29a1d6;
 font-size:14px;
 font-weight:bold;
 line-height:normal;
 padding:5px 0px 0px 0px
}
.left-testimonials ul li .border {
border:1px solid #ececec;
 margin-bottom:7px;
 padding:0px 10px
}

/***rightbar***/

/****ecommerce solutions****/

.overview-key-module {
margin:10px auto 15px auto;
 padding:0px;
 border:0px solid #666666;
 overflow:hidden
}
.overview-key {
width:210px;
 border:0px solid #000000;
 margin:0px 10px;
 float:left;

}
* html .overview-key {
margin:0px 8px
}
.overview-key.overview-key1 {
 background-color:#f9ecfe
}
.overview-key.overview-key2 {
 background-color:#fef5e6
}
.overview-key.overview-key3 {
 background-color:#fff0f3
}

.overview-key-header {
background:url(../images/overview-key-header.jpg) no-repeat;
 width:210px;
 height:110px;

}
.overview-key-header.overview-key-header1 {
background-position:0px 0px;

}
.overview-key-header.overview-key-header2 {
background-position:0px -120px;

}
.overview-key-header.overview-key-header3 {
background-position:0px -240px;

}

.key-features {
margin:10px 0px;
 padding:0px;

}
.key-features ul {
margin:0px;
 padding:0px;

}
.key-features ul li {
margin:0px;
 padding:6px 0px 8px 15px;
 list-style:none;
 font-weight:bold;

}
.key-features ul li.keycolor1 {
 background-color:#f6e4fe
}
.key-features ul li.keycolor2 {
 background-color:#fcebd4
}
.key-features ul li.keycolor3 {
 background-color:#fde4e6
}

.feature-point-module {
margin:0px 0px 25px 0px;
 width:698px;
 clear:left;
 float:left;

}
.features-points {
margin:0px 0px 0px 20px;
 padding:0px;
 border:0px solid #000000;
 width:500px;
 float:left;

}
.features-points ul {
margin:0px;
 padding:0px;

}
.features-points ul li {
margin:0px;
 padding:0px 0px 5px 20px;
 list-style:none;
 background:url(../images/bullet.gif) no-repeat 0px 3px;
 line-height:normal
}
.features-points ul li.subpoint {
background:url(../images/sub-bullet.jpg) no-repeat 22px 5px;
 padding:0px 0px 3px 35px
}
.features-point-icon {
width:150px;
  float:left;
 margin-left:25px;
 border:0px solid #000000;

}
.features-top {
font-size:12px;
 font-weight:bold;
 width:30px;
 text-align:right;
 background-color:#cfe8f4;
 padding:5px 10px;
 float:right;
 margin-right:0px;
 text-decoration:none
}
.features-top:hover {
text-decoration:none
}
.features-top-width {
width:698px;

}

.integration-module {
margin:0px 0px 40px 0px;
 clear:both;
 overflow:hidden
}
.ecommerce-logo {
 width:150px;
 height:75px;
 border:1px solid #f1f1f1;
 text-align:center;
 float:left;
 margin:0px 10px 20px 10px
}
* html .ecommerce-logo {
margin:0px 8px 20px 8px
}

.quicktour {
margin:0px auto;
 padding:0px;
 width:510px;

}
.quicktour ul {
margin:0px;
 padding:0px;

}
.quicktour ul li {
margin:0px;
 padding:0px 0px 15px 0px;
 list-style:none;
 text-align:center
}
.quicktour ul li img {
border:5px solid #f1f1f1;
 padding:10px
}

* html .portfolio {
 margin-right:8px;
 margin-left:8px
}
.portfolio {
margin:10px 10px 20px 10px;
 padding:0px;
 float:left
}
.portfolio ul {
margin:0px;
 padding:0px;

}
.portfolio ul li {
margin:0px;
 padding:0px 0px 5px 0px;
 list-style:none;
 font-weight:bold;
 text-align:center
}
.portfolio ul li img {
border:1px solid #f1f1f1;
 padding:5px
}
.portfolio ul li img:hover {
border:1px solid #29A1D6;
 padding:5px
}
.portfolio ul li a:hover {
text-decoration:none
}

.optin-form-module {
background-color:#f2fafe;
 width:650px;
 margin:0px auto 50px auto;
 overflow:hidden;
 border:1px solid #CFE8F4;
 padding:0px
}
.optin-form {
margin:0px auto;
 padding:0px 0px 20px 0px;
 overflow:hidden;
 width:600px;
 border:0px solid #000000;

}
.optin-form ul {
margin:0px;
 padding:0px;

}
.optin-form ul li {
margin:0px;
 padding:0px 0px 3px 0px;
 list-style:none;
 float:left;

}
.optin-form ul li span {
color:#FF0000;
 padding-left:5px;
 vertical-align:top
}
.optin-form ul li.col1 {
width:255px;
 line-height:normal;
 padding:3px 10px 0px 0px;
 text-align:right
}
.optin-form ul li.col2 {
width:335px;

}
.optin-form ul li.sub-col1 {
width:25px;

}
.optin-form ul li.sub-col2 {
width:305px;
 line-height:150%;

}
.optin-form ul li .textfield {
width:300px
}
.optin-form ul li .textfield-h {
width:300px;
 height:100px
}
.optin-form ul li .submit-btn {
width:233px;

}
.optin-form ul li.title {
border-bottom:1px solid #CFE8F4;
 padding:20px 0px 5px 2px;
 margin-bottom:10px;
 width:600px;
 font-size:18px;

}
.optin-form ul li.privacy {
background:url(../images/lock-icon.gif) no-repeat 20px 10px;
 padding:10px 0px 0px 55px;
 border-top:1px solid #CFE8F4;
 margin-top:10px;
 width:545px
}

/***** seo****/
.bullet-point-common {
margin:0px 0px 10px 0px;
 padding:0px;

}
.bullet-point-common ul {
margin:0px;
 padding:0px;

}
.bullet-point-common ul li {
margin:0px;
 padding:0px 0px 5px 20px;
 list-style:none;
 background:url(../images/bullet.gif) no-repeat 0px 3px;
 line-height:normal
}
.bullet-point-common ul li.subpoint {
background:url(../images/sub-bullet.jpg) no-repeat 22px 5px;
 padding:0px 0px 3px 35px
}
.bullet-point-common ul li.title {
font-size:18px;
 color:#29a1d6;
 padding:0px 0px 3px 0px;
 text-shadow:2px 2px 0px #f1f1f1;
 font-weight:bold;
 border-bottom:1px solid #cfe8f4;
 margin:10px 0px;
 background:none
}

.contactus-module {
border:0px solid #000000;
 overflow:hidden;

}
.contact-adrs {
margin:10px 70px 0px 0px;
 padding:0px;
 float:left;
 border:0px solid #000000;

}
.contact-adrs ul {
margin:0px;
 padding:0px;

}
.contact-adrs ul li {
margin:0px;
 padding:0px 0px 3px 0px;
 list-style:none
}
.contact-adrs ul li img {
border:1px solid #dddddd
}
.contact-adrs ul li img:hover {
border:1px solid #abd6eb
}

.contactus-option-module {
overflow:hidden;
 border:0px solid #000000;
 margin:30px 0px 0px 0px;
 clear:left
}
.contactus-optin {
margin:15px 0px;
 padding:0px;
 width:350px
}
.contactus-optin ul {
margin:0px;
 padding:0px;

}
.contactus-optin ul li {
margin:0px;
 padding:0px 0px 3px 0px;
 list-style:none;
 float:left;
 width:350px
}
.contactus-optin ul li.col1 {
width:80px;
 padding:5px 0px 0px 0px 
}
.contactus-optin ul li.col2 {
width:250px;

}
.contactus-optin ul li .textfield {
width:225px;

}
.contactus-optin ul li .textfield-h {
height:100px;

}
.contactus-optin ul li span {
color:#FF0000;
 padding:0px 0px 0px 5px;
 vertical-align:top
}
.contactus-optin ul li .submit-btn {
width:238px;

}

.client-ranking-module {
margin:0px 0px 20px 0px;
 padding:10px 0px 15px 15px;
 border-top:0px solid #85be2f;
 background-color:#f5f5f5
}
.client-ranking-module ul {
margin:0px;
 padding:0px;

}
.client-ranking-module ul li {
 list-style:none;
 font-size:13px;
 font-weight:bold;
 padding:0px 0px 5px 0px
}
.client-ranking-module ul li.screenshort {
border:1px solid #dddddd;
 width:665px;
 padding-top:5px
}


/***** tstimonials********/
#testimonials {
border-bottom:1px dotted #8ecae7;
 margin-bottom:20px;
 padding-bottom:20px;
 clear:left;
 overflow:hidden 
}
#testimonials p.title {
font-size:14px;
 font-weight:bold;
 color:#29a1d6;
 padding-bottom:0px;
 line-height:normal
}
#testimonials p .text {
font-size:13px;
 color:#222222;
 font-weight:normal
}


/**** careers****/
.apply-now{
background:url(../images/apply-now.jpg) no-repeat left top;
 width:510px;
 margin:20px auto;
 height:47px;
 font-size:16px;
 padding: 6px 0px 0px 190px;
 display:block;
 color:#FFFFFF;
 font-weight:bold
}
.apply-now:hover {
color:#ffffff;
 text-decoration:none
}


/****** portfolio*****/
#portfolio-main {
border:0px solid #000000;
 overflow:hidden;
 clear:left;
 float:left;
 margin-bottom:30px;
 width:700px
}
.ecommerce-box {
border:1px solid #CFE8F4;
 background-color:#f2faff;
 padding:10px 15px;
 margin-bottom:10px
}
.casestudy-mrgn {
margin:20px 0px 5px 0px
}
.caseStudy-img {
float:right;
 margin:0px 0px 10px 10px;
 border:2px solid #f1f1f1;
 padding:5px
}

.caseStudy-table{
margin:8px 0px 10px 0px;
 padding:0px;
 border:1px solid #cccccc;
 border-bottom:none;
 width:698px;
 overflow:hidden
}
.caseStudy-table ul{
margin:0px;
 padding:0px;

}
.caseStudy-table ul li{
margin:0px;
 float:left;
 line-height:200%;
 list-style:none;
 padding-left:8px;
 border-right:1px solid #cccccc;
 border-bottom:1px solid #cccccc;

}
.caseStudy-table ul li.col1{
width:123px;

}
.caseStudy-table ul li.col2{
width:190px;

}
.caseStudy-table ul li.col3{
width:180px;

}
.caseStudy-table ul li.col4{
width:170px;
 border-right:0px;

}
.caseStudy-table ul li.backgrnd {
background:#f6f6f6;
 color:#222222
}
.caseStudy-table ul li.boldtext {
background-color:#29A1D6;
 color:#FFFFFF;
 font-weight:bold
}

Answer 1

好吧，CSS 验证器会向您显示错误/警告在哪一行，所以这已经是一个开始。

现在要做什么(例子)

Same colors for color and background-color in two contexts .caseStudy-table ul li.boldtext and a:hover

意思是:

您的背景颜色与文本颜色相同。验证器显示警告，因为可能无法阅读文本。 (有没有试过在白色背景上阅读白色文本？)

.caseStudy-table ul li.boldtext {
    background-color : #29a1d6; /* background-color */
    color : #ffffff;
    font-weight : bold;
}

a:hover {
    color : #29a1d6; /* text color */
}

如果您在 .caseStudy-table ul li.boldtext 中没有链接，那没关系。这就是为什么消息是警告而不是错误的原因。