提问人:Code Lover 提问时间:4/15/2012 最后编辑:Christofer EliassonCode Lover 更新时间:11/22/2013 访问量:15104
我在哪里可以在CSS中使用+和>?
Where I can use + and > in CSS?
问:
这可能是一个基本问题,但对我来说,我仍然困惑于我可以在哪里使用或在 CSS 中使用。+
>
我看到很多选择器,比如 or 等,但我不确定有什么区别以及何时使用它们?li > a
div + span
答:
>符号表示选择直系后代
例:
CSS的
div > ul {
list-style: none;
}
[HTML全文]在这里,样式将应用于<ul>
<div>
<ul>
</ul>
</div>
+ 号表示选择相邻的兄弟姐妹
例:
CSS的
p + p
{
font-weight: bold;
}
[HTML全文]在这里,这种风格将适用于后者<p>
<div>
<p></p>
<p></p>
</div>
评论
li > a
将仅选择作为元素的直接后代的元素。 将仅选择元素后面的元素。a
li
div + span
span
div
在@bažmegakapa的链接中阅读更多内容: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
是直接子选择器。在您的示例中,这将仅选择作为 的直接后代的标签。>
li > a
<a>
<li>
均值选定元素的同级元素。在您的示例中,将选择 a 旁边的任意 s(具有相同的父级)。+
div + span
<span>
<div>
选择器在 W3 CSS 规范中进行了广泛的解释,但这里有一个摘要:
即时子选择器
选择器是直接子选择器。在您的示例中,规则将选择作为元素的直接子元素的任何元素。>
li > a
<a>
<li>
在此示例中,规则将选择定位点:
<ul>
<li><a href="#">An anchor</a></li>
</ul>
相邻的同级选择器
选择器是相邻的同级选择器。在您的示例中,规则将选择紧接在元素前面的任何元素,并且它们都共享相同的父元素。+
div + span
<span>
<div>
在这种情况下,将选择 span 元素:
<article>
<div>A preceding div element</div>
<span>This span would be selected</span>
</article>
评论
div
span
span
<span/><div/><span/>
span
我不确定 + 号,但 css 中的 > 符号表示直接子号,请考虑一下
div > h1 { color: red; }
这将设置作为 div 的直接子级的所有 h1 标签的样式。
<h1>BLAH</h1>
<div>
<h1>BLAH</h1>
</div>
在这种情况下,第一个 h1 将被单独保留,第二个 h1 因为它是 div 标签的直接子项,因此将是红色的。
上一个:URL结构:小写VS大写
评论
E > F
E + F