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

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

来源

2017-09-21 Yogesh Gadade

可能，将有可能为您发布一些代码，以便我们可以看到滑盖的？ – JohnRambo

https://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_forms_slider_range –

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

E.G.

如果在元素上用鼠标右键单击并选择“检查元素”选项，它会引导您选择正确的元素名称，并且可以在<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>

使用重要会迫使元素来改变自己的风格。

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

最好的问候，贝尔巴托夫Georgiev的

来源

2017-09-21 09:52:36 JohnRambo

非常感谢JohnRambo –

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

回答

相关问题