Jok*_*ker 3 html css css-selectors
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
h2:first-child
{
background:yellow;
}
</style>
</head>
<body>
<div class="car">
<div>Something</div>
<h2>I want to style this</h2>
<p>bla bla</p>
<h2>I don't want to style this</h2>
<p>bla bla bla</p>
</div>
</body>
</html>
我在设置第一个h2时遇到了麻烦,"我想要设计这个样式",因为我在第一个h2之前有一个div我无法选择它,但如果它不存在它就会起作用.没有编辑html(当然没有使用js)有没有办法选择第一个h2？或者用另一个元素包装h2's,如下所示？
<div class="car">
<div>Something</div>
<div>
<h2>I want to style this</h2>
<p>bla bla</p>
<h2>I don't want to style this</h2>
<p>bla bla bla</p>
</div>
</div>
如果你愿意分支到CSS3,那么first-of-type选择器正是你想要完成的.
这是一个例子:http://jsfiddle.net/m3yrR/1/
first-of-type将始终选择任何级别的元素的第一次出现.因此,对于您的情况,它将<h2>在标记树中的任何级别设置第一个样式.您当然可以使用更具体的选择器来限制选择的位置.:)
否则,是的,你必须做一些事情,比如将它包装在另一个中<div>,确保它是第一个元素,然后再做div > h2:first-child.或者只是h2:first-child,如果你想要不那么具体.
只要确保它是其父项的第一个子项(!!),并且具体,因为您需要使用父子层次结构.
| 归档时间： |
|
| 查看次数： |
18020 次 |
| 最近记录： |