Home >Web Front-end >CSS Tutorial >The role of CSS: target selector
The role of CSS: target selector
- 王林forward
- 2023-09-08 09:33:09684browse
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>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!
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete