CSS选择器驱动我坚果! [英] CSS selector driving me nuts!
问题描述
对于这个问题中稍微长的有风代码,提前采用这种方式
Apoologies in advance for the slightly long winded code in this question
@charset "UTF-8";
/* CSS Document */
* {
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
}
#wrapper {
width:900px;
margin:0 auto 0 auto;
}
#header {
background-color:#800080;
width:894px;
min-height:60px;
padding-top:6px;
padding-left:6px;
}
#header img {
margin-left:200px;
margin-top:10px;
}
#headerleft {
float:left;
}
#header h2 {
font-family:Arial Black, Arial, Helvetica, sans-serif;
color:#ffff00;
font-size:36px;
/*float:left;*/
}
#header h3 {
font-family:Arial Black, Arial, Helvetica, sans-serif;
color:#ffff00;
font-size:14px;
}
#nav {
background-color:#800080;
width:100%;
min-height:30px;
}
#nav ul {
padding-left:7px;
padding-right:7px;
}
#nav li {
list-style:none;
display:inline;
padding:5px 44px 5px 44px;
}
#nav li a {
color:#FFF;
text-decoration:none;
}
#nav li a:hover {
color:#ffff00;
}
#leftcol {
background-color:#800080;
width:125px;
min-height:30px;
float:left;
}
#leftcol img {
margin-left:20px;
margin-bottom:20px;
}
.content {
padding:20px 10px 10px 20px;
float:left;
}
<!-- admin classes -->
.pageselect p {
color:#C90;
}
#rightcol {
/*background-color:#800080;*/
width:160px;
min-height:330px;
float:right;
}
.righthead {
margin-top:7px;
background-image:url(../images/rightcol-head.png);
color:#FFF;
padding: 5px 20px 5px 20px;
font-size:14px;
}
.rightmid {
background-image:url(../images/right-mid.jpg);
padding: 5px 10px 5px 10px;
font-size:14px;
}
.rightfoot {
background-image:url(../images/right-foot.jpg);
background-repeat:no-repeat;
}
.clear {
clear:both;
}
#footer {
background-color:#800080;
width:880px;
min-height:30px;
margin-top:-20px;
padding-top:30px;
padding-left:20px;
padding-bottom:10px;
}
#footer p {
color:#ffff00;
}
#footer p a {
color:#ffff00;
text-decoration:none;
}
#footer p a:hover {
font-weight:bold;
}
.error {
color:#C30;
}
我有上面的样式表。我试图风格下面的元素(取自firefox web开发工具):
I have the above stylesheet. I am attempting to style the following element (taken from firefox web developer tools):
html > body > div#wrapper > div#leftright > div.content > div.pageselect
在我看来,.pardselect应该是选择器,但我似乎无力影响风格,它只是给我wacko!
To my mind .pageselect should be the selector to do that, but I seem to be powerless to influence the style, and its just about sending me wacko!
为什么不工作?
编辑注释:
<div class="pageselect">
<p>
page
</p>
</div>
一切都由一个id自己定义或者由一个类来定义,就像我的代码。
Everything is defined by a id on its own or by a single class, just the way I code.
推荐答案
Dude
在您的CSS中发表评论?
<!-- admin classes -->
.pageselect p {
color:#C90;
}
这应该:
/* admin classes */
.pageselect p {
color:#C90;
}
请注意,在某些浏览器中,CSS规则的选择器可以分布在两行:
Take note that in some browsers a CSS rule's selector can be spread between two lines:
.pageselect
p {
color:#C90;
}
/* that was the same as
.pageselect p {
color:#C90;
}
*/
所以你的HTML注释 <! - - >
被解释为CSS选择器的一部分。因为它作为一个CSS选择器没有意义,你的整个规则被删除。
So your HTML comment <!-- -->
is being interpreted as part of a CSS selector. Since it makes no sense as a CSS selector, your whole rule is dropped.
这篇关于CSS选择器驱动我坚果!的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!