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

Question

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

Answer 1

您可以尝试检查元素类是如何调用的，并且可以在<head></head>中使用<style></style>更改它。

例如：

如果您在元素上用鼠标右键单击并选择选项“检查元素”，它将引导您找到正确的元素名称，并且可以在<head>的style属性中更改它们的样式。

这段代码提供了一个示例ho来更改滑块的背景：

<!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>

使用！重要的将强制元素更改其样式。

我希望我至少有一点帮助:)

向你问好，迪米塔尔·乔治耶夫