如何为特定div而非整页应用自定义样式？Chrome滚动条极简样式定制

1. Applying Custom Styles to a Specific <div> (Not the Whole Page) #

Absolutely! This is one of the core strengths of CSS—you can easily target individual elements without affecting the entire page, no JavaScript (including jQuery) required.

Here's how to do it in two simple steps:

• First, add a unique class (or ID) to your target <div>:

  <div class="custom-target-div">
    <!-- Your content goes here -->
  </div>
  

• Then write CSS rules specifically for that class:

  .custom-target-div {
    background-color: #f5f5f5;
    padding: 1.5rem;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
  }
  

This will only apply styles to the <div> with the custom-target-div class, leaving every other element on the page untouched. Use classes if you might reuse the style later, or an ID (like <div id="unique-div"> with #unique-div in CSS) for one-off elements.

2. Customizing Scrollbars for Specific Elements (Minimal Style, No jQuery) #

You bet! Chrome (and other WebKit-based browsers like Edge and Safari) support native CSS pseudo-elements for customizing scrollbars—all with pure CSS, no jQuery needed.

Here’s a minimalist, clean scrollbar example tailored to a specific element:

1. Add a class to your scrollable element:

   <div class="minimal-scroll">
     <!-- Long content that triggers scrolling -->
   </div>
   

2. Apply these CSS rules:

   /* Target the scrollbar container */
   .minimal-scroll::-webkit-scrollbar {
     width: 5px; /* Thin vertical scrollbar */
     height: 5px; /* Thin horizontal scrollbar (if needed) */
   }
   
   /* Target the scrollbar track (background) */
   .minimal-scroll::-webkit-scrollbar-track {
     background: #f0f0f0;
     border-radius: 3px;
   }
   
   /* Target the scrollbar thumb (draggable part) */
   .minimal-scroll::-webkit-scrollbar-thumb {
     background: #999;
     border-radius: 3px;
   }
   
   /* Hover state for the thumb */
   .minimal-scroll::-webkit-scrollbar-thumb:hover {
     background: #666;
   }
   

This creates a subtle, unobtrusive scrollbar that only appears on the element with the minimal-scroll class. For cross-browser support (like Firefox), add these extra rules:

/* For Firefox */
.minimal-scroll {
  scrollbar-width: thin;
  scrollbar-color: #999 #f0f0f0;
}

No scripts required—all native CSS that works seamlessly on modern browsers.

内容的提问来源于stack exchange，提问作者user8749260