如何区分同一页面上不同css中的两个同名类

Question

在我的 asp.net 页面上，我正在链接 2 个 css 文件，这些文件由 2 个不同的控件使用，但主要问题是两个控件中的一个类名相同，因此它们相互冲突，请告诉我如何区分他们之间。

两个都是jquery的，一个是滑块控件，另一个是时间选择器控件。并且他们在背景图像上存在冲突，因为我想更改滑块控件的滚动条的背景图像。请给我解决方案..

滑块使用代码：

    <div id="time1" style="float: left; width: 100px" >
                             <code>$('#time1 input').ptTimeSelect({ popupImage: 
  '<img  alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div >
                                <input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
                            </div>
                        </div>

以下代码用于时间选择器：

 <div id="time2" style="float: left; width: 100px">
                            <code>$('#time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif"
                                style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />'
                                }); </code>
                            <div>
                                <input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" /></div>
                        </div>

Answer 1

注意：这个答案是我的 cmets 的组合，以制定一个与此处发布的另一个解决方案一致并有助于该解决方案的解决方案。

首先，快速提问：为什么您的示例中的 javascript/jquery 周围有 <code> 而不是 <script>？

Edelcom 的回答是遵循正确的方法，但他没有提供代码示例。以下是我的处理方法，使用与他基本相同的方法：

---

滑块代码

<div id="slider"><div id="time1" style="float: left; width: 100px">
<script type="text/javascript">$('#slider #time1 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time1" runat="server" name="s2Time1" readonly="readonly" style="width: 60px" />
</div></div>

在这里，我用另一个 div (id = "slider") 包围了整个元素。因此，我的 jQuery 代码是：$('#slider #time1 input') ...

---

日期选择器代码

<div id="datepick"><div id="time2" style="float: left; width: 100px">
<script type="text/javascript">$('#datepick #time2 input').ptTimeSelect({ popupImage: '<img alt="Select" src="../images/icon_clock_2.gif" style="border-right: 0px; border-top: 0px;    border-left: 0px; border-bottom: 0px" />'
}); </script>
<input id="s2Time2" runat="server" name="s2Time2" readonly="readonly" style="width: 60px" />
</div></div>

我在这里做了同样的事情，除了大 div 现在称为"datepick"。

基本上就是这样。当然，您可以通过选择器直接按 id 选择这些日期选择器，而无需创建其他 div 或诸如此类的东西，因为您已经为它们指定了不同的名称。

Answer 2

在滑块部分周围放置一个<div>，给它一个类（class='myslider'）并在滑块css前面加上.myname。

对日期选择器部分执行相同操作，<div class='myDatePicker'>，并在日期选择器 jQuery 的 css 前加上 .mYDatePicker

这应该可以解决问题。

Answer 3

您可以向其中一个控件添加第二个类。

<div class = "first_class second_class">
<div class = "first_class">

然后执行以下操作：

first_class {
   attributes
}

second_class {
   more attributes that may or may not write over first_class attributes
}

有意义吗？