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 id="第-个元素">第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!

I got this question the other day. My first thought is: weird question! Specificity is about selectors, and at-rules are not selectors, so... irrelevant?

Yes, you can, and it doesn't really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

You should for sure be setting far-out cache headers on your assets like CSS and JavaScript (and images and fonts and whatever else). That tells the browser

Many developers write about how to maintain a CSS codebase, yet not a lot of them write about how they measure the quality of that codebase. Sure, we have

Have you ever had a form that needed to accept a short, arbitrary bit of text? Like a name or whatever. That's exactly what is for. There are lots of

I'm so excited to be heading to Zürich, Switzerland for Front Conference (Love that name and URL!). I've never been to Switzerland before, so I'm excited

One of my favorite developments in software development has been the advent of serverless. As a developer who has a tendency to get bogged down in the details

In this post, we’ll be using an ecommerce store demo I built and deployed to Netlify to show how we can make dynamic routes for incoming data. It’s a fairly


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Atom editor mac version download
The most popular open source editor

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use