Can't get CSS3 selectors to work
Question
I am trying to learn the new CSS3 selectors and so have tried the following code:
<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>
With the CSS:
body[class*="f"]>section[name$="op"]>header[class|top]>div[id*="my"]>h1[id=title]{color:white;}
I would expect my name to be printed in white, not black/auto.
My other CSS in case anyone can find anything out from it:
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;}
I have checked all of this on W3.org and have successfully validated it. So I am stumped by this. Thanks.
3 answers
solution1
4 ACCPTED 2013-09-27 13:36:35
You had a few syntax issues in the selector (mainly quotations around the values).
The reason the selector wasn't working was you had header[class|top] pointing to the wrong attribute, as header had class="head" . You need to change that to name and put an equals after the vertical line.
header[name|="top"]
This is the full selector working below:
body[class*="f"] > section[name$="op"] > header[name|="top"] > div[id*="my"] > h1[id="title"]
{
color:white;
}
solution2
2 2013-09-27 13:31:00
将header[class|top]替换为header[class|name="top"] 。
solution3
1 2013-09-27 13:41:30
You could try replacing the 'class' with 'id' on h1. Also, change h1[class="title-of-site"] to h1[id="title"] .
See this DEMO .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.