Home > Web Front-end > CSS Tutorial > Implement various application scenarios of CSS :target pseudo-class selector

Implement various application scenarios of CSS :target pseudo-class selector

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Release: 2023-11-20 08:26:05
Original
996 people have browsed it

实现CSS :target伪类选择器的各种应用场景

To implement various application scenarios of CSS :target pseudo-class selector, specific code examples are required

CSS :target pseudo-class selector is a commonly used CSS selection A browser that selects specific elements based on anchors (#) in the URL. In this article, we will introduce some practical application scenarios of using this pseudo-class selector and provide corresponding code examples.

  1. In-page navigation link style switching:

When the user clicks on the navigation link in the page, the :target pseudo-class selector can be used to select the currently clicked navigation link. Add styles to highlight where the user is. Here is a sample code:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>
Copy after login
Copy after login

CSS:

.navigation a:target {
  font-weight: bold;
  color: red;
}
Copy after login
  1. Modal effect:

By using: The target pseudo-class selector and CSS3 transition effect can achieve a simple modal box effect. The following is a sample code:

HTML:

<div class="modal" id="modal">
  <div class="modal-content">
    <h2>Title</h2>
    <p>Modal Content</p>
    <a href="#!" class="close-button">Close</a>
  </div>
</div>
<a href="#modal">Open Modal</a>
Copy after login

CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal:target {
  display: block;
}

.modal-content {
  background-color: white;
  width: 300px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-button {
  text-align: center;
  display: block;
  margin-top: 20px;
}
Copy after login
  1. Scroll the page to the specified section

Utilize: target Pseudo-class selector and scroll animation effects can smoothly scroll to the specified section of the page when clicking a navigation link. The following is a sample code:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>
Copy after login
Copy after login

CSS:

html,body {
  scroll-behavior: smooth;
}

#section1:target,
#section2:target,
#section3:target {
  padding-top: 100px; /* 调整目标节的位置,以免内容被导航遮挡 */
}
Copy after login

By using the :target pseudo-class selector, we can achieve a variety of practical effects, such as navigation Link style switching, modal box effects, smooth scrolling, etc. These scenarios are just some of the many applications. You can expand them according to your actual needs and use them more creatively. I hope this article will be helpful to your study and practice!

The above is the detailed content of Implement various application scenarios of CSS :target pseudo-class selector. For more information, please follow other related articles on the PHP Chinese website!

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