如何将外部 CSS 应用于特定元素。其他元素的样式不应更改

Question

我正在使用滑块。其中给出了两个 o/p 一个是最小值，第二个是最大值。但是对于这个滑块，我必须使用外部 CSS 和 JavaScript 文件。这改变了我其他元素的风格。我只想在我的滑块上应用这个 CSS。我该怎么办？

Answer 1

您可以尝试检查元素 class 的调用方式，您可以使用 <style></style>.

在 <head></head> 中更改它

例如

如果您用鼠标右键单击该元素并 select 选项 "Inspect element" 它将引导您找到正确的元素名称，然后您可以在样式中更改它们的样式属性的 <head>.

此代码为您提供了一个更改滑块背景的示例：

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

   <style>
   .ui-slider-bg{
       background: #000000 !important;
   }
  .ui-bar-inherit{
       background: #FFFFFF !important;
   }
  .ui-btn.ui-slider-handle{
       background: #FF0000 !important;
   }

  </style>


  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 </head>
 <body>

    <div data-role="page">
       <div data-role="header">
         <h1>Range Slider</h1>
       </div>

    <div data-role="main" class="ui-content">
      <form method="post" action="/action_page_post.php">
         <div data-role="rangeslider">
           <label for="price-min">Price:</label>
           <input type="range" name="price-min" id="price-min" value="200" min="0" max="1000" >
           <label for="price-max">Price:</label>
           <input type="range" name="price-max" id="price-max" value="800" min="0" max="1000">
         </div>
         <input type="submit" data-inline="true" value="Submit">
         <p>The range slider can be useful for allowing users to select a specific price range when browsing products.</p>
       </form>
     </div>
  </div> 

</body>
</html>

使用 !important 将强制元素更改其样式。

我希望我至少能帮上一点忙:)

此致，迪米塔尔·乔治耶夫

如何将外部 CSS 应用于特定元素。其他元素的样式不应更改

How to apply external CSS to a specific element. Style of other element should not be change

external

apply