Home > Web Front-end > Front-end Q&A > What are the css target selectors?

What are the css target selectors?

青灯夜游
Release: 2021-06-08 11:59:28
Original
3393 people have browsed it

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}".

What are the css target selectors?

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="section1">Section 1</h2>
<h2 id="section2">Section 2</h2>
Copy after login

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&#39;s */
h2:target {
color: #f00;
}
Copy after login

When window.location.hash is "section2", the ID is "section2" The element will turn red and appear underlined.

Rendering:

What are the css target selectors?

(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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template