2016-07-12 67 views
0

我想將樣式應用於多個這些trackbars。CSS Syels不適用於多個控件

如果我使用句點而不是#。它根本不適用樣式。使用[#trackBar_MD]僅適用於1項。如何將樣式應用於多個控件。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="VerticalSlider.aspx.cs" Inherits="SliderTool.VerticalSlider" %> 
 

 
<%@ Register Assembly="DevExpress.Web.v16.1, Version=16.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %> 
 

 
<!DOCTYPE html> 
 

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head runat="server"> 
 
    <title></title> 
 

 
     <style type="text/css"> 
 
     .dxeTBHSys.center 
 
     { 
 
      margin: 60px auto; 
 
     } 
 
     .dxeTBVSys.center 
 
     { 
 
      margin: auto; 
 
     } 
 

 
     .trackBar_MD 
 
     { 
 
      background: transparent url("/Content/img/Drag.png") no-repeat scroll 0% 0%; 
 
      left: 174px; 
 
      top: -7px; 
 
      width: 50px; 
 
      height: 16px; 
 
      background-size: 100%; 
 
     } 
 

 
     .trackBar_T 
 
     { 
 
      background-image:none; 
 
      background-color:black; 
 
     } 
 
     
 
     .trackBar_S 
 
     { 
 
      background-image:none; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
    <form id="form1" runat="server"> 
 
     <div style="float: left; width: 100%"> 
 
     <div style="float: left; width: 50%; height: 350px"> 
 
      <div style="border: thin solid black; margin-left: auto; margin-right: auto; height: 350px"> 
 
       <br /><br /> 
 
      <dx:ASPxTrackBar ID="trackBar" CssClass="center TrackBar_MD" runat="server" MinValue="0" MaxValue="50" Step="1" 
 
       LargeTickInterval="10" SmallTickFrequency="5" EnableViewState="false"> 
 
       
 
      </dx:ASPxTrackBar> 
 
          <dx:ASPxTrackBar ID="trackBa1r" CssClass="center TrackBar_MD" runat="server" MinValue="0" MaxValue="50" Step="1" 
 
       LargeTickInterval="10" SmallTickFrequency="5" EnableViewState="false"> 
 
       
 
      </dx:ASPxTrackBar> 
 
          <dx:ASPxTrackBar ID="trackBar2" CssClass="center TrackBar_MD" runat="server" MinValue="0" MaxValue="50" Step="1" 
 
       LargeTickInterval="10" SmallTickFrequency="5" EnableViewState="false"> 
 
       
 
      </dx:ASPxTrackBar> 
 

 
       </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 
</html>

+1

您在每個中的CssClass屬性是您尚未在CSS中定義的TrackBar。將其更改爲trackBar_MD。 – Kami

+1

瞭解[CSS選擇器](http://www.w3schools.com/cssref/css_selectors.asp)是如何工作的。 –

+0

將'CssClass =「center TrackBar」'改爲'CssClass =「center TrackBar_MD」'或將'.TrackBar_MD'改爲'.TrackBar'。 – hungerstar

回答

0

ID被認爲是唯一的一個元件所以用#符號是什麼的ID。班級由期限定義。類可以應用於很多項目。嘗試將trackBar_MD添加到CssClass上您想要的樣式的元素。

+0

我已經試過了。我更新了示例以顯示它。有什麼想法嗎? –