In css, the target selector has ":target". The ":target" selector is called the target selector, which is used to select the currently active target element, the target element that matches a certain identifier of the URL of the document (page); the syntax format is "element:target{css code style}".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
:target is a very interesting pseudo-class selector in CSS. :targetThe selector is called the target selector, which can be used to select the currently active target element and the target element that matches a certain identifier of the URL of the document (page).
:targetThe process of the selector taking effect in CSS is as follows: when the hash in the browser address (the part after the # number in the address) and the :target pseudo-selector are specified When the ID of the element matches, its style will take effect on the ID element.
Example 1
We have specified IDs on the following two HTML elements:
<h2 id="Section-nbsp">Section 1</h2> <h2 id="Section-nbsp">Section 2</h2>
Note The ID value of the above element. When the ID specified by :target is consistent with the window.location.hash value, the style of the pseudo-selector will take effect.
: The target pseudo-selector can be used with CSS classes, web page tags and any other CSS selectors:
/* would apply to all targetted elements */
:target {
color: #000;
}
/* applies to H2's */
h2:target {
color: #f00;
}When window.location.hash is "section2", the ID is "section2" The element will turn red and appear underlined.
Rendering:

(Learning video sharing: css video tutorial)
The above is the detailed content of What are the css target selectors?. For more information, please follow other related articles on the PHP Chinese website!
Common Vue Reactivity Pitfalls and SolutionsJul 23, 2025 am 03:54 AMCommon problems with Vue responsive systems include: 1. Directly adding object properties does not trigger updates, and attributes need to be defined in advance; 2. Array subscript assignment does not update the view, $set or mutation methods such as splice should be used; 3. After deconstructing nested objects, they do not track them, and they need to be modified through the original path; 4. Accessing the DOM without completing asynchronous update causes old values to be read, and $nextTick should be used to wait for updates. Mastering the solutions to these problems can effectively avoid responsive traps.
Understanding Frontend Build ProcessesJul 23, 2025 am 03:52 AMThe front-end construction process is a process of converting development code into an efficient browser running form, including code compilation, module packaging, resource optimization, and version control. Common processes include: 1. Code compilation such as TypeScript to JS; 2. Module packaging and merging files; 3. Compressing JS, CSS, and image optimization; 4. Automatic hash to prevent cache. Mainstream tools such as Webpack and Vite each have their own focus, and their configuration includes entry, output, loader, and plug-ins. Build a separate development and production model. The former is hot update without compression, while the latter is compressed with TreeShaking. Common problems include module path errors, package size is too large, syntax support and image processing problems. Debugging can pass error message, dist structure checking, and sourc
Vue.js Transition Components for AnimationsJul 23, 2025 am 03:39 AMThe key to implementing animations using Vue.js' Transition component is to understand its working mechanism and class name rules. Transition component is suitable for the entry, departure and update status of elements, and realizes fading or sliding effects by wrapping elements and matching CSS class names; for example, wrapping elements controlled by v-if, and defining classes such as fade-enter-active, fade-leave-active, etc. to control transition time and styles; entry animations are triggered sometimes when elements are from scratch, and exit animations are triggered when elements are about to be hidden or destroyed; for list animations, they should be used, specify keys for each element and set tag attributes to render them into target tags, and support sorting animations, through .lis
Frontend CI/CD with GitHub Actions or GitLab CIJul 23, 2025 am 03:38 AMThe choice of GitHubActions or GitLabCI depends on the platform where the code repository is located. If it is on GitHub, choose GitHubActions. If it is on GitLab, use GitLabCI. Both can realize core functions such as automatic construction, testing and deployment. 1. Platform matching: GitHub project uses GitHubActions more natural, while GitLab project uses GitLabCI more convenient, and their integration is more convenient for permission management; 2. Configuration method: Both are based on YAML, but the keywords are different, such as GitHub uses jobs and steps, and GitLab uses script; 3. Deployment process: GitHubActions has
Frontend Build Time OptimizationJul 23, 2025 am 03:37 AMThe core of optimizing front-end build time is to reduce redundant work, improve processing efficiency, utilize caches and select efficient tools. 1. Use TreeShaking and code segmentation reasonably to ensure that it is introduced on demand and dynamic import reduces the packaging volume; 2. Reduce unnecessary loader processing, exclude node_modules, upgrade loaders and relax the scope of Babel translation; 3. Use the caching mechanism to speed up repeated construction, enable Webpack cache, CI cache and use offline installation; 4. Upgrade toolchain, such as using Vite, esbuild or Rollup to improve the construction speed, although there is migration cost, it has significant effect.
What is the difference between block and inline elements?Jul 23, 2025 am 03:33 AMBlock-level elements occupy one line by default and support full width, while inline elements are displayed in text streams without line breaks. 1. Block-level elements such as, etc. can automatically wrap and width and height can be set; 2. Inline elements such as, etc. are embedded in text streams, width and height settings are usually invalid; 3. The element type can be changed through the display attribute of CSS, such as block, inline-block or flex; 4. Some elements such as and containers using Flexbox/Grid have mixed behavior. Mastering these helps to build a more controllable page layout.
Testing JavaScript Applications with Mocha and ChaiJul 23, 2025 am 03:23 AMUse Mocha and Chai to test JavaScript first to install these two libraries. 1. The installation method is npminstall--save-devmochachai, and create a test folder in the project root directory to store the test files; 2. Configure npmscript such as "scripts":{"test":"mocha"} to start the test through npmtest; 3. Use describe and it to organize the structure of the test cases, and write assertions in combination with expect; 4. Chai supports expect, should and assert, and recommend expe
What is SVG and how to use it in HTML?Jul 23, 2025 am 03:21 AMSVGstandsforScalableVectorGraphics,anXML-basedformatthatusesmathematicalformulasinsteadofpixelstodisplayimagesontheweb.1.SVGsstaysharpatanysize,makingthemidealforlogos,icons,andscalablegraphics.2.Theycanbeeditedwithtexteditors,styledwithCSS,andmanipu


Hot AI Tools

Undress AI Tool
Undress images for free

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

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

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SublimeText3 English version
Recommended: Win version, supports code prompts!

SublimeText3 Linux new version
SublimeText3 Linux latest version

SublimeText3 Chinese version
Chinese version, very easy to use

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.








