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
In-depth understanding of Vue dynamic components and asynchronous components
1. Dynamic Components <!DOCTYPE html> <h...
WeChat applet realizes linkage menu
Recently, in order to realize the course design, ...
Solve the problem of MYSQL connection port being occupied and introducing file path errors
This morning I planned to use Wampserver to build...
jQuery realizes image highlighting
It is very common to highlight images on a page. ...
How to specify parameter variables externally in docker
This article mainly introduces how to specify par...
A brief discussion on the problem of Docker run container being in created state
In a recent problem, there is such a phenomenon: ...
Use PSSH to batch manage Linux servers
pssh is an open source software implemented in Py...
How to simulate network packet loss and delay in Linux
netem and tc: netem is a network simulation modul...
Comprehensive summary of Vue3.0's various listening methods
Table of contents Listener 1.watchEffect 2.watch ...
The principle and application of ES6 deconstruction assignment
Table of contents Array destructuring assignment ...
JavaScript Basics: Scope
Table of contents Scope Global Scope Function Sco...
Implementation code for using CSS text-emphasis to emphasize text
1. Introduction In the past, if you wanted to emp...
A more elegant error handling method in JavaScript async await
Table of contents background Why error handling? ...
Analysis of the principle and creation method of Mysql temporary table
This article mainly introduces the principle and ...
Vue network request scheme native network request and js network request library
1. Native network request 1. XMLHttpRequest (w3c ...