Summarize the commonly used nth-child selectors
PrefaceIn front-end programming, we often use the nth-child selector, which can accept a numerical value as well as odd, even, etc. Today, when I was reading the book Mastering CSS, I remembered that it can also accept an expression, such as 4n+1, -2n+1, etc. So what are their specific uses? What are the applicable scenarios? Maybe you are still not very clear, let's take a closer look at the examples below. Their HTML structure is as follows:
<body>
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>6</a>
</body>
nth-child(even) and nth-child(odd)This is a very commonly used variable, representing even and odd numbers respectively.
<style type="text/css">
a:nth-child(even){/*Even fonts are red*/
color: red;
}
a:nth-child(odd){/*Odd font size is 30px*/
font-size: 30px;
}
</style>Checking the browser also found that it is indeed the same as we expected, as follows:
nth-child(1)Select a single element, the element is matched according to the given value, counting from 1, which should be the most common, as follows:
<style type="text/css">
a:nth-child(3){/*Select the data of the third element for processing*/
color: red;
font-size: 30px;
}
</style>The result is as we expected:
nth-child(2n+1)This form of expression is rarely used. How should it be handled? In fact, it is also very simple. Just count n from 0, calculate the value of the entire expression, match the document, and stop if there is no successful match. For example, how does nth-child(2n+1) match the current document? When n=0, 2n+1=1, it continues to match if it exists. n=1, 2n+1=3, it also exists. n=2, 2n+1=5, it still exists. n=3, 2n+1=7, it can no longer be matched successfully, so the elements that work should be rows 1, 3, and 5. Let's see if the browser results are as we expected:
Sure enough, there are only 1, 3, 5 What if it is -n, for example -n+2, it is actually similar. When n=0, -n+2=2, there is a continued match. When n=1, -n+2=1 still exists. When n=0, -n+2=0 does not exist, the match ends. Therefore, the elements that work should be rows 1 and 2. Look at the results:
So we can use this to match the first few elements. Of course, the elements that can be matched will be different depending on the expression you design. Extensions that are often confused with the above: nth-of-type:nth-of-type has similar values to the above ones, so what is the difference? When the page elements become complicated, you can see it. Change the HTML structure as follows:
<body>
<a>a1</a>
<p>p1</p>
<a>a2</a>
<p>p2</p>
<a>a3</a>
<p>p3</p>
<a>a4</a>
<p>p4</p>
</body>
You can see that there is an extra p tag here, so what happens when we add the following CSS style?
<style type="text/css">
a:nth-child(2){
color: red;
font-size: 30px;
}
</style>
I think many people might say that a2 turns red and becomes bigger, but is it really? Look at the results:
The result is no change, why? Because a:nth-child(2) refers to both the a tag and the second child element in the parent element. In our structure, the second child element in the parent element should be the tag corresponding to p1. So how can we make a2 red and bigger? Here we have to introduce the confusing a:nth-of-type(2), because it refers to both the a tag and the second child element of the parent element among all a elements. Isn’t that exactly what I want? Let's see if the result is what we want?
<style type="text/css">
a:nth-of-type(2){
color: red;
font-size: 30px;
}
</style>
This is what we think. summaryFirst, we summarize the various values of nth-child. Note that single values start counting from 1. If it is a numeric expression, n starts counting from 0. Introduced the confusing nth-of-type, nth-of-type refers to the order in the current specified type of elements, while nth-child is the order among all elements This concludes this article on summarizing the commonly used nth-child selectors. For more information about the nth-child selector, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: The perfect solution for highlighting keywords in HTML
>>: Install and configure ssh in CentOS7
Recommend
How to unify the character set on an existing mysql database
Preface In the database, some data tables and dat...
Solve the Linux Tensorflow2.0 installation problem
conda update conda pip install tf-nightly-gpu-2.0...
How to restore a single database or table in MySQL and possible pitfalls
Preface: The most commonly used MySQL logical bac...
Summary of installation steps and problems encountered in decompressing the mysql5.7.24 version
1. Download https://dev.mysql.com/downloads/mysql...
Steps to export the fields and related attributes of MySQL tables
Need to export the fields and properties of the t...
Vue+element ui realizes anchor positioning
This article example shares the specific code of ...
Ant designing vue table to achieve a complete example of scalable columns
Perfect solution to the scalable column problem o...
Tutorial on adjusting the size of lvm logical volume partition in Linux (for different file systems such as xfs and ext4)
Preface When we installed the system, we did not ...
Detailed explanation of single-row function code of date type in MySQL
Date-type single-row functions in MySQL: CURDATE(...
Summary of several replication methods for MySQL master-slave replication
Asynchronous replication MySQL replication is asy...
MySQL starts slow SQL and analyzes the causes
Step 1. Enable MySQL slow query Method 1: Modify ...
Solve the problem of PhPStudy MySQL startup failure under Windows system
Report an error The Apache\Nginx service started ...
9 code optimization tips to improve website usability that webmasters should pay attention to
1. Add alternative text to your logo This has two...
Solution to the problem that mysql local login cannot use port number to log in
Recently, when I was using Linux to log in locall...
Hadoop 2.x vs 3.x 22-point comparison, Hadoop 3.x improvements over 2.x
Question Guide 1. How does Hadoop 3.x tolerate fa...