选择器补充
文章目录
在本专栏的15篇的文章当中介绍了CSS选择器的基本类型和用法,本篇的选择器相对复杂,是对选择器篇内容的补充。
1.伪类选择器补充
1.1 first-child
选择第一个子元素,:first-child{}
表示选中所有元素中第一个子元素。
通常可以与其他选择器联用,例如a:first-child{}
表示选中a元素,并且a元素必须是第一个子元素。
例1.1:
HTML:
<div>
<a href="">Lorem.</a>
<a href="">Ut.</a>
<a href="">Repellendus.</a>
<a href="">Minima.</a>
<a href="">Iusto.</a>
<a href="">Ipsa.</a>
<a href="">Numquam.</a>
<a href="">Repellendus!</a>
<a href="">Inventore.</a>
<a href="">Cum!</a>
</div>
CSS:
a:first-child{
background-color: yellow;
}
但是如果html代码如下
<div>
<p>lorem.</p>
<a href="">Lorem.</a>
<a href="">Ut.</a>
<a href="">Repellendus.</a>
<a href="">Minima.</a>
<a href="">Iusto.</a>
<a href="">Ipsa.</a>
<a href="">Numquam.</a>
<a href="">Repellendus!</a>
<a href="">Inventore.</a>
<a href="">Cum!</a>
</div>
则选择器a:first-child{}
无法选中任何元素,因为div
的第一个子元素不是a
元素。
这也是:first-child{}
与:first-of-type{}
用法的区别。
1.2 first-of-type
选中子元素中第一个指定类型的元素。
与first-child
功能相似,first-of-type
需要与其他选择器联用,例如a:frist-of-type{}
表示选中子元素中第一个a元素。
例1.2:
<div>
<p>lorem.</p>
<a href="">Lorem.</a>
<a href="">Ut.</a>
<a href="">Repellendus.</a>
<a href="">Minima.</a>
<a href="">Iusto.</a>
<a href="">Ipsa.</a>
<a href="">Numquam.</a>
<a href="">Repellendus!</a>
<a href="">Inventore.</a>
<a href="">Cum!</a>
</div>
在上面的HTML代码中,若想选中子元素中的第一个a元素,则可以使用:first-of-type{}
伪类选择器。
a:first-of-type{
background-color: yellow;
}
1.3 last-child
选择所有最后一个子元素。
a:last-child{}
选中a元素,且a元素必须是最后一个子元素。
例1.3:
HTML:
<div>
<a href="">Lorem.</a>
<a href="">Repudiandae!</a>
<a href="">Fugiat.</a>
<a href="">Quae.</a>
<a href="">Minus.</a>
<a href="">Omnis.</a>
<a href="">Corporis.</a>
<a href="">Quam!</a>
<a href="">Pariatur!</a>
<a href="">Officiis?</a>
</div>
CSS:
a:last-child{
background-color: yellow;
}
1.4 last-of-type
选中子元素中最后一个指定类型的元素。
a:last-of-type{}
表示选中子元素中最后一个a元素。
例1.4:
HTML:
<div>
<a href="">Lorem.</a>
<a href="">Repudiandae!</a>
<a href="">Fugiat.</a>
<a href="">Quae.</a>
<a href="">Minus.</a>
<a href="">Omnis.</a>
<a href="">Corporis.</a>
<a href="">Quam!</a>
<a href="">Pariatur!</a>
<a href="">Officiis?</a>
<p>Lorem, ipsum.</p>
</div>
CSS:
a:last-of-type{
background-color: yellow;
}
1.5 nth-child
选中指定的第几个子元素。
a:nth-child(5){}
表示选中a元素,且必须是第5个子元素。
例1.4:
HTML:
<nav>
<p>Lorem ipsum dolor sit amet.</p>
<a href="">Lorem.</a>
<a href="">Repudiandae!</a>
<a href="">Fugiat.</a>
<a href="">Quae.</a>
<a href="">Minus.</a>
<a href="">Omnis.</a>
<a href="">Corporis.</a>
<a href="">Quam!</a>
<a href="">Pariatur!</a>
<a href="">Officiis?</a>
<p>Lorem, ipsum.</p>
</nav>
CSS:
/* 选中a元素,且该a元素是第5个子元素 */
a:nth-child(5){
background-color: yellow;
}
- 选中第偶数个子元素(even/2n)
a:nth-child(even){}
和a:nth-child(2n){}
均表示选中a元素,且必须是第偶数个子元素
- 选中第奇数个子元素(odd/2n+1)
a:nth-child(odd){}
和a:nth-child(2n+1){}
均表示选中a元素,且必须是第奇数个子元素
例1.5:
HTML:
<ol>
<li>Lorem, ipsum.</li>
<li>Voluptatum, soluta?</li>
<li>Fugiat, iusto.</li>
<li>Voluptatem, quam!</li>
<li>Atque, quas.</li>
<li>Explicabo, beatae.</li>
<li>A, quod!</li>
<li>Nam, exercitationem!</li>
<li>Dolor, voluptatibus?</li>
<li>Magnam, soluta?</li>
</ol>
CSS:
/* 选中a元素,且该li元素是第偶数个子元素 */
li:nth-child(even){
background-color: red;
}
/* 选中a元素,且该li元素是第奇数个子元素 */
li:nth-child(odd){
background-color: blue;
}
或
li:nth-child(2n){
color: red;
}
li:nth-child(2n+1){
color: blue;
}
1.6 nth-of-type
选中指定的子元素中第几个某类型的元素
a:nth-of-type(5){}
表示选中子元素中第5个a元素
2. 伪元素选择器补充
2.1 first-letter
::first-letter{}
,选中元素中的第一个字母(汉字)。
例2.1:
HTML:
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam error magnam quos rem illum obcaecati minus cupiditate maiores. Modi, ipsa!</p>
</div>
CSS:
p::first-letter{
color: red;
font-size: 2em;
font-weight: bold;
}
汉字则选中第一个汉字
2.2 first-line
::first-line{}
,选中元素中第一行文字。
例2.2:
HTML:
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ratione earum nihil nulla atque nostrum corporis hic! Ipsam optio recus
</div>
CSS:
p::first-line{
color: red;
font-weight: bold;
}
2.3 selection
::selection{}
,选中被用户框选的文字。
例2.2:
HTML:
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus ratione earum nihil nulla atque nostrum corporis hic! Ipsam optio recus
</div>
CSS:
p::selection{
color: #fff;
background-color: #f40;
}