The role of CSS: target selector

王林

Release： 2023-09-08 09:33:09

forward

686 people have browsed it

CSS 的作用：目标选择器

Highlight active HTML anchors via CSS using the CSS :target selector.

Example

You can try running the following code to implement :target selector

Live demonstration

<!DOCTYPE html>
<html>
   <head>
      <style>
         :target {
            border: 2px solid #D4D4D4;
            background-color: orange;
            color: white;
         }
      </style>
   </head>
   <body>
      <p>Click any of the subject below.</p>
      <p><a href = "#tut1">Maths</a></p>
      <p><a href = "#tut2">Java</a></p>
      <p><a href = "#tut3">C++</a></p>
      <p><a href = "#tut4">C</a></p>
      <p>This is demo text.</p>
      <p>This is demo text.</p>
      <p>This is demo text.</p>
      <p>This is demo text.</p>
      <p>This is demo text.</p>
      <p id = "tut1"><b>Maths Tutorial</b></p>
      <p id = "tut2"><b>Java Tutorial</b></p>
      <p id = "tut3"><b>C++ Tutorial</b></p>
      <p id = "tut4"><b>C Tutorial</b></p>
   </body>
</html>

Copy after login

The above is the detailed content of The role of CSS: target selector. For more information, please follow other related articles on the PHP Chinese website!

source：tutorialspoint.com

Previous article：From beginner to proficient: Master the skills of using is and where selectors Next article：How do CSS3 properties implement icon layout in web pages?

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