如何將外部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應用於特定元素。其他元素的樣式不應該改變

回答

相關問題