CSS3 first-child selector practical code

This article mainly introduces the practical strategy of CSS3 first-child selector, including the difference between first-child and :first-of-child as well as the IE compatibility issues For explanation, friends who need it can refer to

:first-child

Selector in CSS to select the first group of objects (same parent) of a specific element
HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

// 只套用编号 1 的 li   
li:first-child {   
    color: green;   
}

##The difference between first-child and: first-of-child
Suppose we have a piece of HTML code like this:

<p>
    <p>第1个元素</p>
    <h1>第2个元素</h1>
    <span>第3个元素</span>
    <span>第4个元素</span>
</p>

CSS selector:We want to find the elements in it. If we use the following
DefinitionMethod——p:first-child matches the p element, because the p element is the first child element of p;
h1:first-child does not match any element , because here h1 is the second child element of p, not the first;
span:first-child cannot match any element, because neither span element here is the first child element of p;
:first-child matches the p element, because the first child element of p here is p.
The above
applies styles, two of which cannot be matched, but don’t panic, CSS also defines: first-of-childpseudo-class, please look at it Usage and explanation: p
:first-of-type matches the p element, because p is the first of all p's child elements. In fact, there are only A child element of p; h1:first-of-type matches the h1 element, because h1 is the first of all h1 child elements of p. In fact, there is only one h1 here. Child element;
span:first-of-type matches the third child element span. Here p has two child elements that are spans, and the first one is matched.
:first-of-type matches the p element

Summary: :first-child matches the first child element of a parent element, which can be said to be a structure the first child element on.
:first-of-type matches the first one of the type. What does the type refer to? It is what is matched before the colon. For example, p:first-of-type refers to the first of all p elements. one. There is no limit to the first child element here, as long as it is the first element of this type. Of course, the scope of these elements all belong to the same level, that is, peers.
The same type of selectors :last-child and
:last-of-type, :nth-child(n) and :nth-of-type(n) can also be understood in this way.

Compatibility issues with IE
First look at the following piece of code, HTML part:

<ul class="example">
    <li>aa</li>
    <li>bb</li>
    <li>cc</li>
    <li>dd</li>
</ul>

CSS part:

.example li{float:left;margin-left:10px;}

If you need to set the margin-left of the first li to 0px, you can do it through the following method:

.example li{float:left;margin-left:10px;}   
.example li:first-child{margin-left:0;}

However, IE6 does not support the :child-first method, so we need to use

expressions To achieve that IE6 also supports :child-first, the code is as follows:

.example li{float:left; margin-left:10px; _margin-left:expression(this.previousSibling==null?'0px':'10px');}   
.example li:first-child{margin-left:0;}

Of course, we can also add a

class to the first li to redefine the margin-left. If it is a static page, this is okay. If it is a program If loop is needed to output li, it would be better to use child-first, which at least allows the program to make one less judgment.

The above is the detailed content of CSS3 first-child selector practical code. For more information, please follow other related articles on the PHP Chinese website!