Detailed explanation of descendant selectors of CSS selectors

The descendant selector is used to select all descendants of a tag, including children and grandchildren; while the descendant selector only selects the descendant tags of the specified parent (the first generation child elements of the specified tag element). This article mainly introduces the relevant information on the descendant selector of CSS selector in detail. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The descendant selector uses an extra symbol (angle brackets > ) to indicate the relationship between two elements.

For example: body>h1 selects all the first-generation 4a249f0d628e2318394fd9b75b4636b1 tags in the 6c04bd5ca3fcae76e30b72ad730ca86d tag.

Relationship diagram of HTML tags

##HTML code

<h1>body里面的h1标题</h1>

<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签，p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>

<h2>body里面的h2标题</h2>

<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2（带链接）</a>
    </li>
    <li>
        <a href="#">列表3（带链接）</a>
    </li>
</ul>

After understanding the above structure, you can try the following code:

CSS code

body>h2 {
    color: orange;
}

In the above HTML code, there are a total of 2 c1a436a314ed609750bd7c7d319db4da tags, but 6c04bd5ca3fcae76e30b72ad730ca86d has only one child of c1a436a314ed609750bd7c7d319db4da, and the other c1a436a314ed609750bd7c7d319db4da is in e388a4556c0f65e1904146cc1a846bee inside, so the above CSS code only applies to the first c1a436a314ed609750bd7c7d319db4da tag.

The following is a more interesting child selector

:first-child

Select the first A subtag.

CSS code

h2:first-child {
    color: orange;
}

The function of this selector is to first find all c1a436a314ed609750bd7c7d319db4da tags in the web page , find its parent element through the c1a436a314ed609750bd7c7d319db4da tag, and then determine whether the c1a436a314ed609750bd7c7d319db4da tag is ranked first among its parent elements.

Here because the first tag of 6c04bd5ca3fcae76e30b72ad730ca86d is 4a249f0d628e2318394fd9b75b4636b1, the child element c1a436a314ed609750bd7c7d319db4da of 6c04bd5ca3fcae76e30b72ad730ca86d is not affected by the style.

Because c1a436a314ed609750bd7c7d319db4da in e388a4556c0f65e1904146cc1a846bee is the first child element of e388a4556c0f65e1904146cc1a846bee, so the c1a436a314ed609750bd7c7d319db4da in e388a4556c0f65e1904146cc1a846bee becomes orange.

:last-child

This selector is similar to the :first-child selector, but it selects the last child of an element.

CSS code

li:last-child {
    font-size: 2em;
}

You can see that "Small List C" and "List 3 (with link) "The font size has become larger. Because these two items are the last items specified.

:only-child

Select the only child of an element.

HTML code

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

CSS code

p:only-child {
    color: orange;
}

The above styles only apply to the e388a4556c0f65e1904146cc1a846bee element of the first e388a4556c0f65e1904146cc1a846bee. Since there are not only e388a4556c0f65e1904146cc1a846bee elements in the second e388a4556c0f65e1904146cc1a846bee, but also an 3499910bf9dac5ae3c52d5ede7383485 element, the e388a4556c0f65e1904146cc1a846bee element of the second e388a4556c0f65e1904146cc1a846bee will not be affected by the above style.

This selector is difficult to understand. The style defined by this selector is only effective if the specified tag is the only descendant of another tag. In other words, it is not enough if there is only one specified tag in the descendant. If the specified tag has other sibling tags, the style defined by this selector will be invalid.

:nth-child

This selector is more complicated to use, but it is also particularly useful.

This selector can easily define styles for rows in a table, items two items apart in a list, or other numbers of descendant elements.

This selector requires a value to determine which descendants are selected.

The simplest values ​​are keywords, namely odd and even.

1. odd is used to select odd-numbered descendant elements.

2. even is used to select even-numbered descendant elements.

HTML code

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS code

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

The subscript of the first child element is 1.

It should be noted that if there are other elements before the first 25edfb22a4f469ecb59f1190150159c6, then the subscript of the first 25edfb22a4f469ecb59f1190150159c6 will not be 1.

For example

HTML code

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

The effect at this time is

li:nth-child(odd) 的意思是找到25edfb22a4f469ecb59f1190150159c6元素的父元素，通过父元素来检测每一个25edfb22a4f469ecb59f1190150159c6的下标的奇偶。

因为ff6d136ddc5fdfeffaf53ff6ee95f185的第一个元素是3499910bf9dac5ae3c52d5ede7383485，第二个元素才是25edfb22a4f469ecb59f1190150159c6。也就是说，第一个25edfb22a4f469ecb59f1190150159c6的下标是2，所以第一个下标赋的样式是绿色的背景。

使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过，:nth-child() 还有一些更妙更强大的用法。

可以给 :nth-child() 指定一个数字，精确选择某个子代。比如说要让第4个25edfb22a4f469ecb59f1190150159c6的背景色改成橙色。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(4) {
    background: orange;
}

同样的，这里的 li:nth-child(4) 的意思，是找到25edfb22a4f469ecb59f1190150159c6标签的父元素，然后查找父元素的第4个子元素。

如果HTML代码是下面这样，CSS代码不变的情况下。

HTML代码

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

效果就会变成这样：

会选中第3个25edfb22a4f469ecb59f1190150159c6。因为第3个25edfb22a4f469ecb59f1190150159c6在其父元素里面是排第4的。

如果想每隔2个项目选中第三个项目，可以在数字后面加上字母n。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>

CSS代码

li:nth-child(3n) {
    background: orange;
}

每当遇到3的整数倍的那个元素，就会应用规定的样式。

如果想从第二个子代元素开始算起，选取每隔2个元素的第三个子代元素。可以在3n后面加个2。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>0</li>
</ul>

CSS代码

li:nth-child(3n+2) {
    background: orange;
}

 

如果想从第5个开始算起，每隔2个元素的第三个子代元素更改样式。

CSS代码

li:nth-child(3n+5) {
    background: orange;
}

如果想反向遍历，n前面的倍数就要修改成负数。

CSS代码

li:nth-child(-n+3) {
    background: orange;
}

意思是：从列表的第三个条目算起，选取在此之前的每个条目。

如果想从第4个元素开始，往下选取所有元素。可以这样写：

CSS代码

li:nth-child(n+4) {
    background: orange;
}

以下是子代选择符总览表

Related recommendations:

How to write efficient CSS selectors

CSS selectors Summary of definition and usage

CSS selector

The above is the detailed content of Detailed explanation of descendant selectors of CSS selectors. For more information, please follow other related articles on the PHP Chinese website!