Question

我有一个带有母版页的简单网站。要将属性设置为内容页面上的元素（例如Textbox），我使用CSS。在设计师中它运作良好，但是当我启动一个网站时，一个风格不适用于控件。原因很简单。就是说，我在内容页面中有TextBox id="TextBox1"，它位于ContentPlaceHolder1。在CSS文件中，我为id为#TextBox1的对象设置了属性。当我因主页名称错误而启动一个站点时，会得到一个像ctl00_ContentPlaceHolder1_TextBox1这样的id，它在主页中包含的CSS文件中没有定义。

这个问题的正确解决方案是什么？硬编码名称似乎并不好。

Answer 1

在控件上使用CssClass，如下所示：CssClass="myClass"，然后在样式表中而不是：

#TextBox1 { /* styles */ }

你有这个：

.myClass { /* styles */ }

值得注意的是.Net 4修复，或者允许您更好地管理html中生成的ID，see here for details。

Answer 2

正如Nick和SLaks所说，两个班级都是最好的。您可以在类属性中分配多个类，它将聚合指定的所有类中的所有属性，覆盖它与早期类共享的任何属性。 css文件中类定义的顺序设置了它们应用的顺序。

<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>

<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>

样式应用的顺序首先是genericTextBox，因为它是第一个在样式中定义的（基本上是类中的顺序被忽略）。它设置颜色和背景颜色，然后应用样式文本框1并覆盖背景颜色并添加字体大小。所以最后你会得到来自generictextbox的颜色，textbox1的背景颜色和字体大小。

编辑：在TextBox上将类更改为CssClass

Answer 3

最简单的解决方案是使用类名（不会被破坏）而不是ID来应用CSS规则。

~~正确的解决方案是使用ClientID属性，该属性返回受损的ID。~~

例如：

.Something #<%=TextBox1.ClientID %>` { color: red; }

但是，您只能对内联样式表执行此操作。

内容页面中的CSS和控件名称损坏

3 个答案: