CSS selects the first child element under the parent element (:first-child)
|
Preface I recently used :first-child in a project and it came to mind easily, yeah. Isn't this just selecting the first element? It seems to be very useful, and I don't encounter any problems in my daily use. I naturally think that it will only select the first element under the parent element and have no effect on grandchildren and great-grandchildren elements. It turns out that I was wrong. The first misunderstanding of E:first-child (it will only select one of the areas I specified, and will not traverse how many grandchildren or great-grandchildren elements there are)
<!DOCTYPE html>
<html>
<head>
<style>
body p:first-child
{
background-color:yellow;
}
</style>
</head>
<body>
<p>This paragraph is the first child of its parent element (body). </p>
<h1>Welcome to my homepage</h1>
<p>This paragraph is not the first child of its parent. </p>
<div>
<p>This paragraph is the first child of its parent (div). </p>
<p>This paragraph is not the first child of its parent. </p>
</div>
<p><b>Note:</b> For :first-child in IE8 and earlier browsers, the <!DOCTYPE> declaration is required. </p>
</body>
</html>Will the above code really only work on one p tag?
This is the first common misunderstanding we have made, thinking that body p:first-child selects the first element. In fact, as long as this p is the first one in its parent element in the body we selected, it will be selected. The second misunderstanding of E:first-child (no matter how many brothers are in front of this E element, as long as I am the first E element, then I will take effect)
It is still the above code, but we added a font tag before the p tag in body and found that p is invalid. :first-child is a selector that selects the first child element of its parent element. How to select only the sub-elements of a specified element? Not to mention how many grandchildren and great-grandchildren you have. Child selector (>): can only select elements that are children of a certain element (direct children), excluding grandchildren, great-grandchildren, etc. Take the above code as an example, add > to try the effect
Sometimes the wrong selector is used but no error is reported. But wrong is wrong. There will always be a time to be discovered. This is the end of this article about CSS selecting the first child element under the parent element (:first-child). For more relevant CSS first child element under the parent element, 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! |
<<: SASS Style Programming Guide for CSS
>>: Example code for setting hot links and coordinate values for web images
Recommend
CentOS7 deploys version 19 of docker (simple, you can follow it)
1. Install dependency packages [root@localhost ~]...
Detailed process analysis of docker deployment of snail cinema system
Environmental Statement Host OS: Cetnos7.9 Minimu...
Self-understanding of the background-position attribute in background image positioning
Recently, I need to use a lot of fragmented pictu...
MySQL learning database backup detailed explanation
Table of contents 1.DB,DBMS,SQL 2. Characteristic...
Super detailed basic JavaScript syntax rules
Table of contents 01 JavaScript (abbreviated as: ...
mysql 5.7.18 winx64 password change
After MySQL 5.7.18 is successfully installed, sin...
Selection and thinking of MySQL data backup method
Table of contents 1. rsync, cp copy files 2. sele...
Detailed explanation of common MySQL operation commands in Linux terminal
Serve: # chkconfig --list List all system service...
Implementation of the list-style-type attribute in front of CSS ordered or unordered lists
example: <html> <head> <style type...
MySQL table return causes index invalidation case explanation
Introduction When the MySQL InnoDB engine queries...
Summary of MySQL slow log practice
Slow log query function The main function of slow...
jQuery implements a simple carousel effect
Hello everyone, today I will share with you the i...
Example of using negative margin to achieve average layout in CSS
For evenly distributed layouts, we generally use ...
Question about custom attributes of html tags
In previous development, we used the default attr...
WeChat applet scroll-view implements a solution to duplicate data loading when pulling up
The scroll-view of WeChat applet has more bugs wh...