25、CSS基础——选择器补充

选择器补充

在本专栏的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;
}