Sequence selector (number selector)
Order selector in css2
| Selector | example | Example description | CSS |
|---|---|---|---|
| :first-child | p:first-child | Select each of the first child elements belonging to the parent element element. |
2 |
The most representative order selector added in css3
| Selector | example | Example description | CSS |
|---|---|---|---|
| :first-of-type | p:first-of-type | Select the first one that belongs to its parent element Each element element. |
3 |
| :last-of-type | p:last-of-type | Select the end of its parent element Each element element. |
3 |
| :only-of-type | p:only-of-type | Select the only one that belongs to its parent element Each element element. |
3 |
| :only-child | p:only-child | Select each of the only child elements belonging to its parent element element. |
3 |
| :nth-child(n) | p:nth-child(2) | Select each of the second child elements belonging to its parent element element. |
3 |
| :nth-last-child(n) | p:nth-last-child(2) | Same as above, counting from the last child element. | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | Select the second element belonging to its parent Each element element. |
3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Same as above, but counting from the last child element. | 3 |
| :last-child | p:last-child | Select each of the last child elements belonging to its parent element element. |
3 |
Detailed label
p :first-type
Select each <p> element belonging to the first child element of its parent element (it can also be understood as selecting the first tag of the same level to see if it is a p tag, such as the grandfather's boss and the p tag, the father's boss And it’s the p tag, the boss of the son’s generation and the p tag... Wait, if it is, then change its style, only the boss, the second is the P tag without changing the style)
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<a href = "#">我是第一个子元素，但我不是段落</a>
<p>这个段落是其父元素（body）的首个子元素。</p>
<h1>欢迎访问我的主页</h1>
<p>这个段落不是其父元素的首个子元素。</p>
<div>
<p>这个段落是其父元素（div）的首个子元素。</p>
<p>这个段落不是其父元素的首个子元素。</p>
</div>
<p><b>注释：</b>对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。</p>
</body>
</html>
The effect is as follows:
Note: body is also a parent tag.
p:first-of-type
Specify the background color of the first p element of the parent element: (note the difference between this selector and the above, that is rather only looking for the p tag in the eldest son in each generation, so go to the next generation to find it. This selector compares Be patient, keep looking down in this generation until you find the first p tag, if you can’t find it, go to the next generation. The first of the same type at the same level)
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<a href = "#">我是第一个子元素，但我不是段落</a>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<div>
<h1>这个段落是其父元素（div）的首个子元素。</h1>
<p>这个段落不是其父元素的首个子元素。</p>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body>
</html>
The effect is as follows:
p: last-of-type selector
Specify the last p element of the parent element, (it is the opposite of the previous tag, and find the first p tag of the same level and type in reverse.)
<!DOCTYPE html>
<html>
<head>
<style>
p:last-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<div>
<p>我是段落1</p>
<p>我是div中倒数第二个标签，但我是p标签</p>
<h6>我是div中最后一个标签，但不是p标签</h6>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body>
</html>
The renderings are as follows:
p: last-child selector (css2)
Specify the background color of the p element belonging to the last child element of its parent element: (Find the youngest son of the same generation, if it is the p tag, change the color, if not find the next generation. Different from last-of-type, last-of- The type is the peer search from back to front until the first p-note is found, not to the next generation.)
p:last-child
{
background:#ff0000;
}
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<div>
<p>我是段落1</p>
<p>我是div中倒数第二个标签，但我是p标签</p>
<h6>我是div中最后一个标签，但不是p标签</h6>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
p:nth-child(3) selector
Specifies the background color of each p belonging to the third child element of its parent element. (Find the third in the same generation, if it is p, change the color, not in the next generation to find the third).
p:nth-child(3) {
color: red;
}
<p>我是段落1</p>
<p>我是段落2</p>
<a href="#"></a>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
p:nth-of-type(3) selector
Specify each p of the third p element belonging to its parent element: (Different from nth-child(3), find the third p tag, which can be separated by other tags.)
<style>
p:nth-of-type(3) {
color: red;
}
</style>
<p>我是段落1</p>
<p>我是段落2</p>
<a href="#">我是段落</a>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
p:nth-last-child(3)
It is stipulated that each p element belonging to the third child element of its parent element is counted from the last child element: (the sibling looks from back to front, and it must be the third from the bottom and change the style if it is a P tag)
p:nth-last-child(3)
{
color: red;
}
<p>我是段落1</p>
<p>我是段落2</p>
<a href="#">我是段落</a>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
p:nth-last-of-type(3)
It is stipulated that each p of the third p element belonging to its parent element is counted from the last child element: (this is not a fixed position, the third p tag of the same level is found from back to front)
p:nth-last-of-type(3)
{
color: red;
}
<p>我是段落1</p>
<p>我是段落2</p>
<a href="#">我是段落</a>
<p>我是段落3</p>
<p>我是段落4</p>
<div>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
p:only-child selector
Specify each p element that belongs to the only child element of its parent element: (The only child of each generation can accept inheritance.)
p:only-child {
color: red;
}
<p>我是段落2</p>
<a href="#">我是段落</a>
<div>
<p>我是段落5</p>
</div>
<div>
<p>这是段落。</p>
<h6>这是段落。</h6>
</div>
p:only-of-type selector
Specify each p element of a specific type of unique child element belonging to the parent element: (For example, each generation can have several children, but the selection can only be made by one boy, and the only boy can accept inheritance)
p:only-of-type {
color: red;
}
<p>我是段落2</p>
<a href="#">我是段落</a>
<div>
<p>我是段落5</p>
</div>
<div>
<p>这是段落。</p>
<h6>这是段落。</h6>
</div>
Special usage
p:nth-child(odd){
属性：值：
}
Odd means, this usage is to find whether all odd positions (1, 3, 5, 7...) of the same level are p tags, and if so, change the style. If not, go to the next level.
p:nth-child(even){
属性：值：
}
Even means even, this usage is to find all odd positions (2,4,6,8...) of the same level are p tags, and if so, change the style. If not, go to the next level.
p:nth-of-type(even){
属性：值：
}
p:nth-of-type(odd){
属性：值：
}
Compared with the above, these two distinguish parity only in all p tags at the same level, regardless of other tags.
p:nth-child(xn+y){
属性：值：
}
x and y are user-defined, and n is a counter, which increments from 0 (defining selection rules by yourself is very convenient )
1. The brackets of these selectors can be numbers, keywords or formulas.
2. The child elements selected by these selectors are operated. Since they are all in the body tag, the body tag is also the parent element, so it is said to be searched at the same level.
3. It is divided into two categories: the number of the same level and the number of the same type. The same level means that they are all searched by the same generation. The number one is to find in a fixed position. If you find the label, change it, and if you can't find it, go Level; the same type means the same kind of label. Of course, this is also searched first at the same level. The number one means to find the label at the same level. There is no need to fix the position. When searching at this level, the style will be changed as long as the label is found. , Go to the next level if not.
4. The p in these selectors is the representative of the label, and it can be a specific type you customize. Examples are easier to understand than abstract.
5. Basically they are corresponding, a fixed position, a fixed quantity, and a fixed quantity only. Then count from the back
6. Generally speaking, there is more nonsense, but it is relatively easy to understand.