[英]Can't get CSS3 selectors to work
我正在嘗試學習新的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]
指向錯誤的屬性,因為header具有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上將“類”替換為“ id”。 另外,將h1[class="title-of-site"]
更改為h1[id="title"]
。
看到這個演示 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.