我正在尝试学习新的CSS3选择器，因此尝试了以下代码：
<body class="frontpage">
<section name="top">
<header class="head" name="top">
<div id="my-name">
<h1 id="title">
Josh Dempsey
</h1>
</div>
</header>
</section>
</body>
使用 CSS：
body[class*="f"]>section[name$="op"]>header[class|top]>div[id*="my"]>h1[id=title]{color:white;}
我希望我的名字是用白色打印的，而不是黑色/自动的。
我的其他CSS，以防有人可以从中找到任何东西：
body[class*="fro"]{background-color:#f8efe1;height:auto;width:auto;direction:ltr;z- index:1;}
section[name*="t"]{position:absolute;top:0px;left:0px;width:100%;height:100px;}
header[class$="ad"]{background-color:#272727;height:100%;width:100%;}
h1[class="title-of-site"]{color:white;font-family:'Open Sans',sans-serif;font- weight:300;margin:0}
header[class$="op"]>div[name*=image_holder] {position:absolute;top:5px;left:10%;bottom:5px;height:40px;width:40px;background-color:
transparent;}
我已经在 W3.org 上检查了所有这些并成功验证了它。所以我对此感到困惑。谢谢。
您在选择器中遇到了一些语法问题(主要是值周围的引号(。
选择器不起作用的原因是您header[class|top]指向了错误的属性，因为标头class="head"。您需要将其更改为名称并在垂直线后放置一个等号。
header[name|="top"]
这是在下面工作的完整选择器：
body[class*="f"] > section[name$="op"] > header[name|="top"] > div[id*="my"] > h1[id="title"]
{
color:white;
}
将header[class|top]替换为header[class|name="top"] 。
您可以尝试在 h1 上将"class"替换为"id"。此外，将h1[class="title-of-site"]更改为 h1[id="title"] 。
请参阅此演示。