What are the css target selectors?

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="section1">Section 1</h2>
<h2 id="section2">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!