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
How to solve the error when connecting to MySQL in Linux: Access denied for user 'root'@'localhost'(using password: YES)
Preface Recently connected to mysql /usr/local/my...
Detailed explanation of js event delegation
1. Each function is an object and occupies memory...
HTML form component example code
HTML forms are used to collect different types of...
How can we promote Jiedaibao so that everyone will register? Jiedaibao promotion methods and skills
Jiedaibao is a mobile phone loan software platfor...
How to use vite to build vue3 application
1. Installation Tip: There is currently no offici...
Detailed explanation of Docker daemon security configuration items
Table of contents 1. Test environment 1.1 Install...
Detailed explanation of common operations of Docker images and containers
Image Accelerator Sometimes it is difficult to pu...
html opens a new window with a hyperlink and can control window properties
1. The window size opened by the HTML hyperlink C...
An analysis of div+float, a very important concept in website design
In website construction, you will always encounter...
In-depth explanation of the global status of WeChat applet
Preface In WeChat applet, you can use globalData ...
Using NTP for Time Synchronization in Ubuntu
NTP is a TCP/IP protocol for synchronizing time o...
Detailed explanation of JSONObject usage
JSONObject is just a data structure, which can be...
Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables
First, let's introduce a few key points about...
DockerToolBox file mounting implementation code
When using docker, you may find that the file can...
Summary of some reasons why crontab scheduled tasks are not executed
Preface I recently encountered some problems at w...