(四)伪类选择器
3.都有哪些呢?
1):超链接伪类
2)结构伪类
a.:first-child
选择第一个孩子
这样写是后代选择,后代的第一个孩子也会被选中
<body>
<main>
<article>
<h2>第零个儿子</h2>
<h1>
第一个儿子
</h1>
<h2>紧挨着第一个的第二个儿子</h2>
<aside>
<h2>这是第一个孙子</h2>
<h2>这是最后一个孙子</h2>
</aside>
<h2>
最后一个儿子
</h2>
</article>
</main>
</body>
<style>
article :first-child{
color: red;
}
</style>
可是我就是想选儿子辈第一,不想带后代。用之前学过的子选择器 > .
<style>
article> :first-child{
color: red;
}
</style>
还可以选择类型,比如说选择在第一位的h1
<style>
article h1:first-child{
color: red;
}
</style>
居然没有选中,为啥呢?
因为孩子当中,没有h1在第一位的,所以选不中。如果改一下,让h1为第一就可以选中。
<body>
<main>
<article>
<!-- <h2>第零个儿子</h2> -->
<h1>
第一个儿子
</h1>
<h2>紧挨着第一个的第二个儿子</h2>
<aside>
<h2>这是第一个孙子</h2>
<h2>这是最后一个孙子</h2>
</aside>
<h2>
最后一个儿子
</h2>
</article>
</main>
</body>
那我非要选择h1里面第一个h1怎么办呢?可以使用:first-of-type
<style>{
article h1:first-of-type{
color: red;
}
</style>
b.:last-child
就是最后一个孩子,用法和first相同,只不过从选第一个到选最后一个。
:first child → :last child
first-of-type→:last-of-type
c.:only-child
选择唯一的孩子
<body>
<main>
<article>
<h1>我是唯一的h1</h1>
<div>
<h1>div第一个孩子</h1>
<h2>div第二个孩子</h2>
</div>
<aside>
<h1>我是唯一的孩子</h1>
</aside>
</article>
</main>
</body>
<style>
article :only-child{
color: red;
}
</style>
也可以指定种类选择,比如选择儿子辈里选择唯一个h1,用 :only-of-type ,跟前面类似
<style>
article>h1:only-of-type {
color: red;
}
</style>