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

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>

CSS:

.navigation a:target {
  font-weight: bold;
  color: red;
}

2. 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 id="Title">Title</h2>
    <p>Modal Content</p>
    <a href="#!" class="close-button">Close</a>
  </div>
</div>
<a href="#modal">Open Modal</a>

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;
}

3. 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>

CSS:

html,body {
  scroll-behavior: smooth;
}

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

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!